Arquivo

Posts Tagged ‘asp.net mvc’

AngularJs + Ui-Router – Controller sendo inicializado mais de uma vez

04 - 15 2 comentários

Desenvolvendo um frontend com angularjs, me deparei com um pequeno problema.

Contexto:

-> View que permite o usuário consultar o seus dados pessoais, e editá-los.

Controller:

-> Consome uma API /api/account/getdadosprofile, e atualiza a tela com os dados retornados.

Código abaixo: Configuração da minha rota utilizando plug-ins “ui-router” e “ocLazyLoad“.

.state("profile.account", {
            url: "/account",
            templateUrl: "views/profile/profile.account.html",
            data: { pageTitle: 'Minha Conta', pageSubTitle: 'dados da conta' },
            controller: "dadosUsuarioController",
            resolve: {
                deps: ['$ocLazyLoad', function ($ocLazyLoad) {
                    return $ocLazyLoad.load({
                        name: 'MyApp',
                        insertBefore: '#ng_load_plugins_before', // load the above css files before '#ng_load_plugins_before'
                        files: [
                            'js/controllers/dadosUsuarioController.js'
                        ]
                    });
                }]
            }
        })

Estou utilizando ui-router para fazer o roteamento das minhas views.

O data-bind estava funcionando corretamente na minha view, mas percebi utilizando as Developer Tools do Browser (F12), na aba Network, que estavam sendo executadas 4 requests para a API.

O problema disso? Tráfego desnecessário(e duplicado) de dados sendo feito entre client/server.

Investigando bastante a solução, passei pela documentação oficial do ui-router, e li artigos focados em ui-router, mas encontrei a resposta no seguinte post do StackOverflow:

http://stackoverflow.com/questions/15535336/combating-angularjs-executing-controller-twice

No stackOverflow a resposta/explicação se baseou no roteamento nativo do angularJs, mas percebi que isso se aplicava também no “ui-router”. A questão é: Quando especificamos o parâmetro “controller” na rota, esse controller é injetado automaticamente na minha view/template. Por não saber disso, eu declarava o controller manualmente na div.

<div ng-controller="dadosUsuarioController"> // motivo do controller ser executado 2 vezes
   // dessa forma a solução é: 1: remover a diretiva acima, 2: remover o parâmetro controller na sua rota.
</div>

Pessoal, em suma é isso, dúvidas/sugestões, enviem pelos comentários.

Abraço.

Acelerando desenvolvimento ASP.NET MVC com Twitter Bootstrap

Imagine o seguinte cenário:

Você precisa desenvolver um projeto web, mas não tem afinidade com CSS.

As possibilidades que imagino são:

1. Investir num designer profissional para o projeto.

2. Se aventurar no design.

3. Utilizar um template pronto.

4. Criar um novo design com o amigável Twitter Bootstrap.

Já estou utilizando em novos projetos. E é ótimo.

Há muitos pontos fortes como:

  • Sistema de grid. Muito fácil posicionar os elementos na página com ele.
  • Design responsivo: Suporte a tamanhos de tela diversos. (Mobile, Tablets etc.)
  • Tipografia
  • Blocos de Código: Facilita a inserção de blocos de código.
  • Tabelas: Estilização fácil de tabelas.
  • Formulários: Facilita a inserção de formulário com caixas de busca, checkboxes, selects etc. com estilos de validação dentre outros.
  • Botões: diversos estilos de botões.
  • Mini Ícones: mini ícones para utilizar livremente.
  • Componentes: Dentre diversos componentes para dropdowns, labels, badges, tipografia, thumbnails, alerts, progress bars, dentre outros.
  • Pugins Javascript: Bootstrap também acompanha atualmente 12 plug-ins jquery. * Requer a última versão do jQuery linkada na página.

Exemplo de tela construída com o Twitter Bootstrap:

 

Veja mais motivos pra utilizar o Twitter Bootstrap no Site Oficial

Conheça mais sites construídos com o bootstrap no tumblr Built with Bootstrap

 

Outros links:

Artigo em português sobre o Twitter Bootstrap: http://abruno.com/blog/twitter-bootstrap/

Prototipando com Placehold.it

05 - 12 3 comentários

Desenvolvendo um novo website ASP.NET MVC 3 com C#, precisei posicionar um carousel na página, e queria preenchê-lo com alguns items de tamanho: 900 x 300.

Possibilidades:

1. Utilizar algum editor e criar uma imagem com o tamanho 900 width x 300 height.

2. Usar o serviço placehold.it.

PrintScreen do site Placehold.it

Obviamente optei pela opção de utilizar o Placehold.it. É um serviço muito útil nessa situação.

Utilizando o serviço rapidamente obtemos vários tipos de placeholders para prototipar nossos sites:

  • Placeholder de tamanho 150×150 contendo texto:

Código HTML: <img src=”http://placehold.it/150×150&text=placehold.it+e+muito+bom!”/&gt;

  • Placeholder de tamanho 300×300 com background preto e foreground branco:

Código HTML: <img src=”http://placehold.it/300/000000/eeeeee&text=placehold.it+quebra+um+galho!”/&gt;

 

E por fim o carousel que criei com a ajuda do Twitter Bootstrap e do Placehold.it:

Item de carousel usando imagem do Placehold.it

dotnettips.wordpress.com/

Helping Programmers Since 1994

Viagem e Voo

Dicas para viagens, férias e voos nacionais e internacionais

Ivan Guimarães Meirelles

Analista Desenvolvedor

Void Podcast

Vazio e sem retorno de valor

Elemar DEV

Negócios, tecnologia e desenvolvimento

2,000 Things You Should Know About WPF

Everything a WPF Developer Needs to Know, in Bite-Sized Chunks

blog

so long

Fernando Franzini Blog

Engenharia de Software e Arquitetura Ágil

Gabriel RB.net

Blog técnico, com dicas, códigos, novidades e problemas do dia-a-dia programando.

Alexandre Valente's Blog

Experiências em tecnologia e assuntos diversos

%d blogueiros gostam disto: