Portal GSTI
Portal GSTI

PublicarCadastre-seLogin
Menu
Publicação

Falhas comuns no uso do AngularJS

foto de
Jorge Massari CONTEÚDO EM DESTAQUE


Manipulação do DOM com jQuery

Programadores iniciantes em #AngularJS podem ocorrer nesta falha: tentar usar jQuery para modificar o DOM em controladores. Isso inclui adicionar elementos, remover elementos, recuperar seus conteúdos, mostrá-los e escondê-los. Use diretrizes embutidas, ou escreva seu próprio caso, para fazer sua manipulação DOM. Veja abaixo sobre a funcionalidade de duplicação.

Se você está lutando para quebrar o hábito, considere a possibilidade de remover jQuery do seu aplicativo. AngularJS tem o serviço $ http e as diretivas poderosas que tornam quase sempre desnecessário o uso do jQuery . O jQLite incluído na AngularJS possui alguns dos recursos mais utilizados na escrita de diretivas AngularJS, especialmente vinculativas para eventos. 

Tentando duplicar a funcionalidade que já existe

Avalie antes de tentar implementar uma funcionalidade: há uma boa chance de que seu aplicativo não seja o primeiro a exigir certas funcionalidades. Alguns exemplos a seguir.

Ng-repeat 

Com Ng-repeat acontece muito. Programadores tentam usar o jQuery para adicionar mais elementos em vez de utilizar da ng-repeat. 

Ng-show 

Com Ng-show também ocorre frequentemente. Programadores estão acostumados a exibir e ocultar elementosusando o jQuery, pois é assim que o fazem em outros aplicativos e esquecem que o AngularJS disponibiliza esta facilidade. Ng-show (e ng-hide) condicionalmente mostram e escondem elementos com base em expressões booleanas.

Para exibir e ocultar um elemento, basta descrever as condições nas variáveis $scope

<div ng-show="!loggedIn"><a href="#/login">Click here to log in</a></div>

ng-class

A aplicação condicional de classes a elementos é outra tarefa qual programadores estão acostumados a utilizar jQuery. No AngularJS você pode fazer de uma maneira mais fácil: basta nomear a ng-class com um conjunto de nomes de classes separados por espaços.

Uma ainda solução mais "elegante" seria usar seguinte sintaxe:

<div ng-class="{ errorClass: isError, warningClass: isWarning, okClass: !isError && !isWarning }">...</div>

Onde você atribui a ng-class um objeto, cujas chaves são nomes de classes #CSS e cujos valores são expressões condicionais usando variáveis ​​$ scope. O elemento terá então todas as classes cujas condições são verdadeiras, e nenhum daqueles cujas condições são falsas. 

Observe também a classe prática ng-class-even e ng-class, e o relacionado com algo diferente do estilo ng.

Divisão por Módulos

Uma outra falha que pode ocorrer a um desenvolvedor iniciante em AngularJS é deixar tudo fora do módulo principal. Essa prática pode prejudicar a performance do aplicativo, há não ser que se trate de um app de pequena dimensão.  
Uma boa prática seria agrupar módulos por recursos. Esta opção, além de facilitar a escalabilidade e reutilização de módulos entre aplicativos.

Sobrecarregar o Controlador

É comum que programadores iniciantes insiram excessivamente a lógica no controlador. Os controladores nunca devem fazer manipulação do DOM ou manter os seletores do DOM. As diretivas e o ng-model fazem muito bem este papel  no Angular. 
Dados devem ser armazenados em serviços, exceto quando estiver sendo vinculado ao $scope. Os serviços são singletons que persistem ao longo da vida útil da aplicação, enquanto os controladores são transitórios entre os estados de aplicação. Se os dados são armazenados no controlador, então será necessário buscá-los em algum lugar quando for restabelecido. Mesmo se os dados são armazenados em localStorage, é uma ordem de magnitude mais lenta para recuperar do que com uma variável Javascript.
O AngularJS funciona melhor quando se segue o Princípio de Responsabilidade Única (SRP). Se o controlador é um coordenador entre a vista e o modelo, então a quantidade de lógica no controlador tem que ser mínima. Isso também tornará mais simples os testes.

Combinando ng-repeat com outras diretivas

O ng-repeat é extremamente útil, uma das diretivas mais poderosas da AngularJS. No entanto, a transformação que se aplica ao DOM é substancial. Portanto, aplicar outras diretivas (como ng-show, ng-controller e outros) para o mesmo elemento que ng-repeat pode causar problemas.

Se você deseja aplicar uma diretiva a toda a repetição, envolva a repetição em um elemento pai e coloque-a lá. Se você deseja aplicar uma diretiva a cada parte interna da repetição, coloque-a em um filho do elemento com ng-repeat.

Comentários