Overview AngularJS

Nesse post teremos um overview de Angularjs e de suas principais funcionalidades.

O AngularJS é um framework SPA, que possui suporte a MVC (Model,View e Controller) e MVVM(Model, View, ViewModel) e como todo framework tem como objetivo nos trazer alguns benefícios.

Porém devemos tomar alguns cuidados quando falamos de frameworks, pois não devemos sair usando-os em tudo. Sou grande defensor de que devemos conhecer bem a fundo a linguagem antes de usarmos um framework, seja em qualquer linguagem. Pois assim evitamos nos tornar refém deles, podendo analisar qual é a melhor opção para o que será desenvolvido no momento.

Benefícios do AngularJS

Alguns dos benefícios que ele nos traz, são:

  • Two-Way Data Binding.
  • Injeção de Dependências (capaz de tornar a aplicação mais fácil de desenvolver, compreender e testar).
  • Separação de Responsabilidades.

Toda aplicação deve-se conter a diretiva ng-app=”Nome do Módulo Principal”. O ng-app é necessário para que toda a página seja uma aplicação AngularJS.

Algumas diretivas padrão

  • ng-app -Esta diretiva define e vincula um aplicativo AngularJS no HTML.
  • ng-model -Esta diretiva vincula os valores de dados do HTML com os controllers.
  • ng-bind -Esta diretiva vincula os dados do controller no HTML.

Entendendo um pouco mais

A separação de responsabilidade é feita através de diferentes “componentes”:

  • Module — São utilizados para organizar os objetos em um aplicativo. São usados como o núcleo, podendo conter todas as classes da sua aplicação em um único módulo, ou podemos por exemplo ter um módulo para nossa aplicação onde teremos os Controllers, Serviços e Filtros e outro módulo onde colocamos nossos componentes, as diretivas.
  • Controller — Serve para fazer a intermediação de dados entre a camada de serviço e a view. Uma boa prática é sempre deixar as regras de negócios no serviço. Sempre que queremos vincular um controller diretamente na view usamos uma diretiva do angular para isso, o ng-controller.
  • Directive — São marcadores DOM, normalmente são usados para criarem “componentes” (podendo ter como marcador um elemento html, atributo, css e etc…) reutilizáveis. O próprio Angular possui diretivas internas (ngModel, ngIF, ngShow e etc…). O ngModel citado é quem este faz a ligação do valor no HTML para dados da aplicação. Para saber mais sobre diretivas indico a leitura do artigo
https://medium.com/@cironunesdev/diretivas-angularjs-isolate-scope-ed07d11e56c7#.xbipycxpa
  • Service — O angular possui vários “serviços” internos para nos ajudar na comunicação com o servidor. Os mais úteis são o ngHttp e ngResource. ngHttp é usado para fazer solicitações HTTP. ngResource é uma extensão do ngHttp projetado para trabalhar exclusivamente com APIs REST. Normalmente dentro dos serviços escrevemos também as regras de negócios, isso nos facilita na hora de testar a aplicação.
  • Filters — Acho que este é o conceito mais difícil de se entender do angular, por se tratar de algo bem complexo. Os filtros podem ser usados para filtrar dados como se diz o nome ou também podem ser usados pra formatar dados de uma lista, como por exemplo deixar toda palavra em uppercase.
  • Route — É o que nos da suporte para roteamento.

O código completo de exemplo você encontra aqui:

https://github.com/rafaellacerda/artigo-overview-angularjs

Espero que tenham gostado, abraços!