Arquivo

Posts Tagged ‘angularjs’

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.

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: