Lançado em 2009 pela equipe de desenvolvedores do Google, o AngularJS conta com uma grande comunidade. Grandes companhias acreditam no sucesso do projeto, incluindo o próprio Google e a Nike. Uma das principais características do Angular está relacionada à modularidade dos seus componentes. Aspecto que é muito bem atendido pela injeção de dependências que será visto no decorrer do artigo.
Incrivelmente, a sociedade que lida com tecnologia tem se sobressaído no que diz respeito ao conservadorismo com as tecnologias antigas e também deixado de lado o comodismo com coisas que apenas atendem algumas necessidades. Este motivo vem fazendo com que boas tecnologias estejam sendo utilizadas aos quatro cantos... Também não é novidade que estas tecnologias, em especial o AngularJS, são temas de palestras em inúmeros eventos como foi no Fluent 2014 e como vai ser no Campus Party 2014.
Até pouco tempo, a maioria dos desenvolvedores adotavam tecnologias como o JQuery para implementar funcionalidades básicas utilizadas no front-end. Alguns exemplos são: validações, manipulação do DOM, tratamento, estilização e exibição de conteúdo, etc. O mesmo ainda continua a acontecer em muitas situações. É preciso reconhecer que o JQuery foi e ainda é um Framework bem interessante e utilizá-lo em certos casos ainda é muito bom. Além do mais, ele resolve um antigo problema dos desenvolvedores Web que é a questão da compatibilidade entre diferentes browsers. No entanto, quem trabalhou com sistemas grandes necessitados de inúmeras interações de interface, sabe que a organização do código fica comprometida.
Na qualidade de engenheiros do conhecimento e promulgadores da evolução tecnológica, devemos sempre discernir a competência de cada tecnologia e a eficiência do que pode ser melhorado.app/index.html:
1
2
3
4
5
6
7
8
9
| <!doctype html><html ng-app> <head> <title>Minha aplicação usando AngularJS</title> <script src="js/angular-1.2.15.min.js"></script> </head> <body> </body></html> |
Além de informar o atributo ng-app, é necessário adicionar o AngularJS script tag para baixar o script e executá-lo quando a página for carregada. Ao ser executado o AngularJS vai compilar todas as instruções de bindings e diretivas a iniciar do elemento raiz. No caso do código acima, ele iniciaria a partir da tag html.
Recursos
O AngularJS contém muitos recursos interessantes que possibilitam criar soluções para muitas necessidades. A seguir serão apresentados alguns destes recursos. A Figura a seguir apresenta a arquitetura do AngularJS.
O Angular é um full-featured SPA framework, ou seja, ele é provido completamente de recursos para criação de aplicações que funcionam a partir de uma única página (Simple Page Applications). Os principais recursos do AngularJS são descritos a seguir.
Data Binding
No Angular existem dois tipos de instruções que podem ser utilizadas para exibir informações na tela de usuário. Um delas se dá por meio do atributo ng-bind-html e a outra forma é através de chaves, {{}}. Nas duas formas, o AngularJS vai interpretar a expressão e atualizar o conteúdo no DOM. Além disso, o AngularJS possui uma característica denominada two-way data bind que corresponde ao fato do $scope service atualizar expressões no HTML após detectar alterações no modelo. O exemplo abaixo demonstra o conceito de two-way data binding.
MVC
Sobre este modelo de arquitetura não será dado tanto enfoque pois se trata de um conceito bem entendido pela comunidade Web. Na verdade, o AngularJS estende o conceito do MVC para o MVW (Model View Whatever). A questão é saber que o AngularJS adota este conceito isolando cada conjunto de funcionalidades e de dados no seu arquivo específico. Esta separação de funcionalidades se dá por meio de entidades, interfaces de usuário, controladores e se estende ainda aos serviços.
Routing
O routing tem muita relação com os padrões de nomenclatura de URL. Situação que era solucionada no passado com as re-escritas de URL. Mas além disso, o routing permite a implementação de deep links, associação de uma determinada rota ao seu controlador. As rotas devem ser especificadas no arquivo principal de scripts da aplicação conforme o exemplo abaixo.
1
2
3
4
5
6
7
8
9
10
11
| HelloApp.config(['$routeProvider', function($routeProvider) { $routeProvider. when('/hello/:name', { templateUrl: 'hello.html', controller: 'HelloCtrl' }). otherwise({ redirectTo: '/' }); }]); |
Testing
No AngularJS é possível utilizar tantos os testes unitários quantos os testes de integração (end-to-end). Para crias testes é necessário a utilização de ferramentas apropriadas. No caso dos testes unitários uma boa opção é utilizar o Jasmine (behavior-driven development framework para testar código JavaScript), além deste pode ser utilizado também o Mocha e o QUnit. Para escrever os testes de integração, estão disponíveis o Protractor (framework que realiza testes sobre a aplicação como se fosse um usuário), o Karma (Test Runner for JavaScript) e o CasperJS.
jqLite
O jqLite é uma API que contém alguns métodos que são compatíveis com o JQuery. Apenas os métodos mais significativos foram adicionados à API. Estes métodos possibilitam que o AngularJS faça manipulação no DOM. Este recurso só é utilizado quando o JQuery não está disponível na aplicação.
Templates
Os templates são criados no HTML com elementos e atributos do Angular. Estão inclusos neste conceito as diretivas, marcações que indicam expressões {{}}, filtros e controle de formulário com validações. O index.html é por padrão o template principal da aplicação.
History
O histórico de navegação é provido pelo $location service, mas não é apenas isto: o location conta com um conjunto de métodos que interage com a navegação da aplicação no browser podendo tanto observar elementos na URL quanto setar seus valores.
Factories
Os factories são registrados com o module e são responsáveis pela criação da maioria dos objetos no AngularJS. É possível utilizar uma factorie para disponibilizar informações temporárias para todos os escopos da aplicação.
viewModel
Conceito que representa um modelo na interface de usuário identificado pelo atributo ng-model.
Controllers
As controllers são construtores criados em documentos JavaScript para interagir com a interface de usuário.
Directives
São representadas por marcadores em algum elemento DOM que chama o AngularJS para mudar o comportamento do elemento. É possível criar novas directives além de utilizar as que são disponibilizadas pelo AngularJS.
Os services são funções ou objetos singleton que são criados por um service factorie para realizar tarefas especificas da aplicação.
Services
Os services são funções ou objetos singleton que são criados por um service factorie para realizar tarefas especificas da aplicação.
Dependency Injection
A dependency injection (injeção de dependências) é um padrão de projetos que é utilizado amplamente no AngularJS. Ela fornece os serviços que são utilizados nas controllers quando os mesmos são iniciados. Além disso, as dependências de transição dos serviços também são carregadas na injeção de dependências.
Validation
Considerações
Na minha concepção, não existem aplicações onde o AngularJS possa deixar a desejar por falta de algum recurso importante, etc. Vão existir casos em que frameworks menos complicados serão tão úteis quanto o AngularJS. Caso haja alguma dúvida quanto isso, pode-se comparar alguns frameworks com fins parecidos. Indico a leitura deste artigo que faz determinadas comparações Ember vs AngularJS.
Nenhum comentário:
Postar um comentário