Motivos para você NÃO utilizar AngularJs em aplicações ASP.NET MVC
O AngularJs é um framework fantástico, que inclusive está contando com o apoio da Microsoft em sua versão 2 (Utilizando TypeScript), porém ele não é bala de prata, e neste artigo vou descrever algumas razões nas quais eu PARTICULARMENTE não utilizo ele junto ao ASP.NET MVC
AngularJs também é MVC!
Sim! Dizemos que o AngularJs é um framework MV* (M, V, Whatever), onde ele possui não só Controllers (C do MVC) mas também Services, Factories e Directives. Sendo assim, o AngularJs já usa o padrão MVC.
Caso opte por utilizar AngularJs em sua aplicação ASP.NET MVC, você terá seu conjunto de pastas padrão (Models, Views, Controllers) e também terá a estrutura do AngularJs dentro da sua pasta Scripts ou onde queira colocá-lo.
O fato é que o você terá um Controller, com uma Action, para renderizar uma View, onde vai chamar um Controller do Angular, que por sua vez vai fazer o binding dos objetos na View. Pelo menos para mim soa bem estranho.
Fora isto, você terá o gerenciamento da sua aplicação, dos arquivos. A medida que seus Controllers (.cs) crescem, seus Controllers (.js) também crescem… Afinal você vai querer deixar tudo organizado, certo?
“Ahhh, mas eu utilizo apenas em algumas telas, para two-way binding”, então você pode utilizar outros frameworks, menos completos, que fazem somente esta função, como o Knockout por exemplo.
Gerenciamento de estado
Na demo ficou lindo, mas agora preciso que após o usuário se cadastrar ele seja direcionado para outra View do Angular, ou mesmo do MVC. Aí começam as complicações.
O AngularJs tem um recurso de rotas incrível, contido no “angular-route”, que mantém a navegação das páginas. Para isto ele utiliza o hashbang na URL, e baseado no history (HTML5) conseguimos navegar de forma assíncrona.
O problema é que esta gestão é feita no CLIENTE, enquanto o ASP.NET MVC simplesmente gera o HTML no SERVIDOR e retorna o mesmo para tela. Ou seja, temos estados diferentes em lados diferentes.
Embolação do Razor com JavaScript
Uma das coisas que mais acontece, é no meio de um código JavaScript, o uuso de alguma sintaxe Razor… por exemplo:
$scope.teste = ‘@ViewBag.Teste’;
Isto ocorre por que as vezes temos os valores em ViewBag que precisam ser passados para o script, e tudo isto é gerado no servidor, então, qual o problema em misturar ambos?
O problema é que você não vai deixar todo seu código JavaScript em uma View. Em vários pontos você vai separar isto em arquivos, em Controllers, e nos arquivos “.js” você não consegue chamar as variáveis do Razor!
Gerenciamento dos objetos
Quando utilizamos algum framework como AngularJs no frontend, uma de suas responsabilidades é a geração de objetos na tela, afinal, só trazemos os dados do servidor, correto?
Em muitos casos, vejo o uso do ASP.NET MVC para gerar a tela, e o AngularJs trabalhando nos pontos adicionais. O que acontece aqui, é que como o AngularJs não gerou préviamente estes objetos, eles vão ser mais difíceis de serem manipulados.
Aliás, umas das coisas “lindas” do AngularJs para mim são as Diretivas, que no caso temos uma versão do Bootstrap com várias delas prontas para o Angular.
Pois bem, se você optou por não utilizar Diretivas, vai precisa obter os objetos de alguma forma… Aí entra o uso do jQuery, que não é proibido, mas não é recomendado junto ao uso do Angular. Misturando jQuery aqui, e em alguns casos você vai precisar de muito jQuery, você automaticamente ganha um ingresso para o inferno!
Varias aplicações
Como o estado e os módulos carregados não podem ser mantidos, toda página você vai precisar inicializar o AngularJs, carregar todos os módulos novamente. Nem preciso comentar o que dá esta parte né?
AMD
Não há algo nativo para controle de módulos assíncronos no Angular, mas em uma rápida busca, temos vários caminhos:
Pois bem, carregar módulos assíncronos (E descarregar os que não estão em uso) também é uma boa prática. Lembre-se que o processo de tudo que você faz no JavaScript fica para o frontend. Imagina 40, 50 módulos carregados na sua aplicação?
Em resumo
Se você precisa somente de 2 way binding, foca em um framework mais leve, como o Knockout. Se você quer organizar seu código, utiliza o RequireJs junto com o jQuery que seja. Se você optar por utilizar AngularJs, utiliza o ASP.NET MVC apenas como um bootstrapper e depois de carregado sua página (Teria somente um Controller com uma Action e uma View), utiliza somente o Angular.
Aliás, por que está utilizando ASP.NET MVC se precisa de toda essa manipulação no JavaScript? Por que não utiliza ASP.NET WebApi no backend com AngularJs no front? Aí sim tem liberadade para utilizar o AngularJs do jeito certo!
