.png)
O Angular JS é o pop dos Frameworks para desenvolvimento de aplicações SPA (Single Page Application), aparecendo na lista como uma das Most Excited Techology of 2013 na StackOverflow Survey 2013. Este foi criado e, é mantido por Engenheiros da Google e traz um toolbox completo para desenvolver aplicativos fantásticos, criando uma organização natural no projeto e possibilitando extensibilidade por meio de criação de componentes. Outro diferencial é o suporte oferecido pela comunidade, que é bem grande no GoogleDocs e StackOverflow.
Abaixo estão algumas dicas que recolhi por experiência desenvolvendo uma Aplicação complexa a nível Enterprise com ASP.NET MVC e Angular JS.
Abaixo estão algumas dicas que recolhi por experiência desenvolvendo uma Aplicação complexa a nível Enterprise com ASP.NET MVC e Angular JS.
Não abandone a sua ViewEngine
Passar a responsabilidade de tudo na sua View para o Angular JS é complicado. Você perderá toda flexibilidade e controle que a ViewEngine te proporciona. Deixando esta de lado seu código JavaScript crescerá de maneira assustadora, sendo difícil de rastrear problemas. Além disso, a segurança pode ficar comprometida se você retornar diretamente uma View em HTML estática.
Use os Controllers do MVC e seus filtros para ajudarem nessa parte de segurança e a ViewEngine para popular com alguma informação ou bloquear e sumir conteúdos que necessitam de perfis específicos. A reusabilidade de conteúdo também depende da sua ViewEngine, use ViewBag/ViewData e PartialViews sempre quando necessário. Faça o Angular JS atuar onde ele é bom e não comprometerá sua produtividade.
Não crie directives que herdem $scope
Como um bom iniciante, procure entender o comportamento do $scope dentro de uma Directive. Existem três tipos.
- Parent scope você pode fazer iteração entre diretivas.
- Child scope herda completamente o scope atual, no caso do controller mais acima, logo é possível setar valores de variáveis do Controller de dentro da diretiva.
- Isolated scope, em que a diretiva tem seu próprio $scope e não interage com outro.
Entender esses conceitos é importante. Quando comecei a desenvolver directives não entendia direito e várias das quais criei tiveram que ser refeitas. Não sabia que criando diretivas de Child scope causariam problemas em meus componentes, porque estavam todas ligadas ao mesmo Controller e várias dessas dentro da mesma View causariam concorrência e erros "bizarros" - aprendi da pior forma, "leson learned" :D.
O site do Angular JS não explica bem o conceito, como a maioria dos outros, mas esse post do SackOerflow te dará uma aula completa:
O site do Angular JS não explica bem o conceito, como a maioria dos outros, mas esse post do SackOerflow te dará uma aula completa:
Não use JQuery
O Angular JS vem com uma versão do JQuery embutida, chamada JQLite que disponibiliza as funções básicas da versão full que são mais utilizadas. Existe uma variedade de diretivas que fazem o trabalho do JQuery de maneira muito mais elegante como ng-class, ng-hide, ng-show, ng-selected, ng-disabled, dentre outras.
Mas na hora de construir as suas próprias diretivas será necessário acessar o DOM para interagir com o elementos da View. É aí que entra o JQLite:
Então, nada de scripts JQuery soltos na View ou mesmo dentro do Controller.
Não lute contra o padrão, aprenda MVVM
O MVVM foi criado pelo prodígio do Design Patterns Martin Fowler e o Angular JS foi construído com base nele. De uma maneira geral Angular JS te obriga a seguir um certo padrão para desenvolver a sua aplicação.
Dentro desse padrão está o Controller e $scope que representam sua ViewModel, seu HTML e directives que compõem a View. Não use lógicas absurdas dentro da View usando variáveis do $scope, pois a manutenção vai ficar muito mais difícil. Faça toda a lógica dentro do Controller, e reforçando mais uma vez, sem JQuery.
Aprenda a usar $watch e os interceptadores $http
O $watch possibilita que você observe uma variável qualquer do $scope e execute algum evento caso o seu valor mude. Esse recurso é muito poderoso e pode te economizar centenas de linhas de código para, por exemplo, caso o valor da variável assistida mude esconda, apague ou crie campos dinamicamente na tela.
Do mesmo modo que o $watch, os interceptadores $http podem salvar tempo, possibilitam centralizar validações de erros, habilitar e desabilitar cache, alterar e ler cabeçalhos HTTP e muito mais.
Do mesmo modo que o $watch, os interceptadores $http podem salvar tempo, possibilitam centralizar validações de erros, habilitar e desabilitar cache, alterar e ler cabeçalhos HTTP e muito mais.
Se você quer mostrar para o usuário uma mensagem de erro amigável toda vez que o seu servidor lançar uma exceção ou uma mensagem específica caso uma validação de campo falhe, os interceptadores são o melhor caminho e você fará uma vez só para ser usada por toda aplicação - Don't repeat yourself.
Herança de controllers existe
Quando seu projeto apresenta muitos padrões, com telas parecidas que executam coisas iguais, a primeira coisa que se pensa é fazer algo reutilizável. Imagine uma tela de inserção que é utilizada em vários cenários, que possuem os mesmos campos e acessam os mesmo dados.
Você pode fazer herança de controllers do Angular JS para facilitar a sua vida. A maneira mais fácil é colocar o controller pai declarado mais externo na View e o controller filho dentro deste. O $scope do pai estará acessível para o filho, sendo possível utilizar de todos os métodos e variáveis. Eu ainda inventei uma maneira de se fazer override dos métodos do controller pai - não sei se isso é legal, se é bonito ou feio, mas salvou minha vida.
//Copio o método original do Controller Pai
$scope.salvarBase = angular.copy($scope.salvar);
//Modifico o método e chamo o base
$scope.salvar = function () {
//Faço coisas específicas para o Controller Filho]
$scope.salvarBase();
}
No trecho de código acima eu copio o método original do Controller mais externo, logo depois altero seu comportamento. Por mais feio que seja, funciona e me salvou horas de trabalho.
Não deixe clientes e analistas criarem Fluxos esdrúxulos
Esta é uma parte crítica e bem abstrata do problema, porque dependendo da forma que seu cliente ou analista escreve o Angular JS pode ser um passo para o fracasso. A quantidade de JavaScript que será necessária para escrever seu sistema vai ser absurda - tenho controllers com mais de 2200 linhas de JavaScript devido a pedidos esdrúxulos do cliente.
Não deixe que seu analista crie telas com abas por todos os lados ou fluxos que envolvam chamadas em cascatas de modais que são exibidos a partir de determinados resultados de chamadas assíncronas ao ASP.NET. Irão aparecer erros quase impossíveis de rastrear e o código ficará poluído.
Não deixe que seu analista crie telas com abas por todos os lados ou fluxos que envolvam chamadas em cascatas de modais que são exibidos a partir de determinados resultados de chamadas assíncronas ao ASP.NET. Irão aparecer erros quase impossíveis de rastrear e o código ficará poluído.
Não deixe a validação por conta do AngularJS
Infelizmente a validação de campos ainda não funciona muito bem, principalmente no IE8/9/10, total fracasso. Deixe tudo que puder no server e use os interceptadores $http que falei anteriormente para exibir os erros para o usuário em um modal, por exemplo.
É possível combinar interceptadores e directive para exibir aquelas famosas validações inline ou em um sumário parecido com o do ASP.NET MVC puro.
Se achar que é muito trabalhoso fazer a sua diretiva, use o clássico jquery-validation para fazer o trabalho duro para você – já aviso que vai perder toda a diversão fazendo sua própria directive =D.
Diga não a versões anteriores ao IE10
O IE7/8/9 como sempre nos acompanha em nossa jornada – desculpe MS, mas é dureza suportá-lo, principalmente com muito JavaScript =(. Se for realmente necessário usar o IE7/8/9, seu cliente for teimoso na verdade, já aviso que terá uma dura jornada.
Cada Controller Angular JS, pode ter certeza, vai ter uma série de trechos de código que só serão executados caso o Browser usado seja IE. No caso das directives, algumas específicas que desenvolvi, foram feitas praticamente duas versões por causa de incompatibilidades.
Um grande problema que enfrentei também foi o cache. Em alguns casos o IE não atualiza a tela de maneira alguma, então existe um cache killer, em que é desabilitado cache de JSON para IE7/8/9 e no interceptador. Chamadas get recebem um timestamp para evitar problemas.
Se você será um sofredor como eu fui, segue abaixo uma série de links que resolverão alguns problemas:
- Data not updating on ie 9/10 in application developed using angularjs
- Disable browser cache for entire ASP.Net website
- AngularJS on IE7 not working: how to fix it.
- Is JSON.stringify() supported by IE 8?
Conclusão
O Angular JS é fantástico, sua aplicação fica com outro nível. Se você tem medo de JavaScript mude de profissão, porque o futuro da Web é Single Page Application.
Abaixo seguem alguns tutoriais de como iniciar em Angular JS + ASP.NET MVC:
- Video Tutorial: AngularJS Fundamentals in 60-ish Minutes
- Angular App Structuring Guidelines
- Iniciando com AngularJS – Guia Muito bom feito pelo MVP Andre Baltieri
Espero que tenham gostado do Artigo. Qualquer dúvida sobre Angular JS e ASP.NET MVC estou a disposição. Meu contato está no blog, me procure.
Boa semana para todos!
+-+Microsoft+Visual+Studio.png)
+-+Microsoft+Visual+Studio.png)
+-+Microsoft+Visual+Studio.png)
.png)
+-+Microsoft+Visual+Studio.png)
+-+Microsoft+Visual+Studio.png)
+-+Microsoft+Visual+Studio+(Administrator).png)
+-+Microsoft+Visual+Studio+(Administrator).png)
+-+Microsoft+Visual+Studio+(Administrator).png)
+-+Microsoft+Visual+Studio+(Administrator).png)
.png)
+-+Microsoft+Visual+Studio+(Administrator).png)
+-+Microsoft+Visual+Studio+(Administrator).png)
+-+Microsoft+Visual+Studio+(Administrator).png)
