Conheça um pouco mais sobre o AngularJS

Hoje começamos os artigos da série dedicados às frameworks JavaScript. A primeira
framework que vamos trabalhar é o AngularJS, um dos mais populares nos últimos anos e também um dos mais estudados.

Além dele, os próximos posts irão cobrir outras Frameworks importantes. A sequência será a seguinte:

1. AngularJS
2. NodeJS
3. Meteor
4. ReactJS
5. JQuery e suas variações

Vamos então direto ao ponto. Vamos conhecer o AngularJS!

Aspectos básicos do AngularJS

Essa ferramenta é conhecida como uma das principais frameworks para páginas Webdinâmicas. As páginas HTML estáticas são usadas como templates e o AngularJS estende a sintaxe do HTML para pode adicionar componentes dinâmicos de forma bem transparente.

Em poucas palavras o, AngularJS estende a linguagem HTML com novos atributos para permitir a introdução de aplicações dinâmicas. Assim, umas das principais vantagens da IDE é sua facilidade de uso e aprendizado (ainda que para dominar a IDE seja necessário uma boa experiência).

A ferramenta é patrocinada pelo Google e um ponto fundamental para entender seu funcionamento é conhecer a arquitetura na qual ela está baseada, a MVC (Model-View-Controller).

Com essa arquitetura, o Angular constrói a aplicação com base em três camadas:

  • O Modelo, que corresponde à toda informação exibida para o usuário ou fornecida por ele como input;
  • A camada HTML, que cumpre o papel de template/visualização. É na camada HTML
    que o usuário interage (é a camada de view);
  • A terceira camada é onde está a parte dinâmica da aplicação (o controller). Essa
    camada acessa as informações do modelo e as utiliza para atualizar e interagir a página HTML.

Apesar de ser baseado no MVC, a arquitetura não é 100% seguida à risca. Por exemplo, a camada lógica (controller) não acessa diretamente a camada de visão, sendo possível testá-la separadamente da página HTML.

Para dar uma “pitada” de como seria um projeto com AngularJS, vamos dar um exemplo super simples.

<!DOCTYPE html>
 <html lang="pt-br">
 <scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></sc
 ript>
 <body>
 <div ng-app="">
 <p>Nome : <input type="text" ng-model="name"></p>
 <p ng-bind="name"></p>
 </div>
 </body>
 </html>

Veja que para introduzir o AngularJS em seu projeto, basta inserir a linha:

<scriptsrc=”https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js></script>

O AngularJS estende a página HTML por meio de ng-directives. Lembrando dos conceitos de MVC que acabamos de ver, as tags que você deve entender são:

  • Uma diretiva ng-app define a aplicação como AngularJS.
  • A diretiva ng-model linka o valor dos controles HTML (input, select, textarea) para os dados da aplicação.
  • A diretiva ng-bind linka os dados da aplicação para a camada de visão do HTML.

Explicando o exemplo AngularJS

O código de exemplo é bem simples. O AngularJS inicia automaticamente quando a página web é carregada. Em relação às diretivas, vemos que:

  • A diretiva ng-app directive diz para o AngularJS que a tag &lt;div&gt; é o owner da aplicação.
  • A diretiva ng-model link o valor do campo de entrada (input) com o nome da variável da aplicação
  • Por fim, a diretiva ng-bind linka o código HTML interno do &lt;p&gt; com o nome da variável..

A partir desse exemplo você já pode se imaginar brincando com o AngularJS e evoluindo para aplicações e códigos mais avançados. Antes de terminarmos, vamos deixar uma pequena nota histórica.

Nota histórica

A primeira versão, AngularJS 1.0, foi lançada em 2012. No entanto, o principal responsável pelo projeto, o engenheiro do Google Miško Hevery, já trabalhava na aplicação desde 2009. No fim das contas, o projeto foi tão bem recebido pelo mercado que o próprio Google passou a apoiá-lo oficialmente.

A versão mais atual é a 1.6.9, com a 1.7 já agendada para ser lançada em junho de 2018.

Interessante saber que uma ferramenta desenvolvida por um funcionário do Google recebeu apoio oficial da empresa, não é? Será que o Miško Hevery ganhou um bônus pela proatividade?

Continue a nos acompanhar para conhecer os demais frameworks! Até a próxima!

E aí? Curtiu o artigo? Então deixe seu comentário!

This site uses Akismet to reduce spam. Learn how your comment data is processed.