O que é o Angular JS? by Alexandre Marreiros

Artigo

Alexandre Matreiros explica em que consiste e quase são os potenciais de ainda usar o Angular JS: uma plataforma emergente de JavaScript (JS), mantida pela Google e por uma comunidade ampla de desenvolvimento na forma de open source.

Angular JS

O Angular JS é uma plataforma Javascript que potencia a criação de aplicações web complexas centradas essencialmente na componente de frontend, permitindo um modelo de desenvolvimento muito mais centrado na experiência de utilização e camada de frontend.

Desde o seu lançamento beta, em 2009, que esta plataforma tem sido essencial na construção de aplicações complexas, estendendo a partir das diretivas AngularJS o HTML utilizado como estrutura base das soluções.

Estas diretivas consistem na extensão do DOM através de atributos adicionais que tornam o HTML mais responsivo às necessidades do utilizador.

 

Single Page Application (SPA)

“Why do we want to write single page apps? The main reason is that they allow us to offer a more-native-app-like experience to the user.” From SinglePageAppBook

O Angular JS é essencialmente utilizado em aplicações SPA. Define-se como uma Single Page Application a uma aplicação ou website cujo scope de interação diz respeito a uma página Web.

A utilização desta abordagem face às abordagens tradicionais de aplicações multi página permite reduzir o número de roundtrips do browser ao servidor e criar uma experiência de utilização (UX) mais imersiva.

A experiência de utilização proporcionada por uma abordagem SPA é mais próxima da obtida quando se interage com uma aplicação do que a de um website tradicional.

A estrutura base de uma aplicação SPA encontra-se representada na figura seguinte:

A árvore de DOM surge com base em qualquer aplicação web. No caso das SPA não é exceção, é aqui que se encontram registadas as diferentes tags que constituem as fundações HTML da aplicação.

O Model representa o domínio dos dados apresentados e permite uma abordagem content/ data centric.

A View representa essencialmente a interface com o utilizador e reflete os conteúdos/dados presentes no Modelo da aplicação.

Para uma descrição mais detalhada e aprofundar os temas relacionados com SPA sugerimos a consulta do seguinte post.

Angular JS quais os conhecimentos base para começar

Antes de começar a codificar em AngularJS é fundamental ter o conhecimento global da representação em árvore de DOM da aplicação a construir.

É igualmente relevante o conhecimento da sintaxe JavaScript e a lógica de programação associada à manipulação da árvore de DOM.

Os conhecimentos relacionados com subtecnologias como JQUERY, CSS e técnicas como as de injeção de dependências e AJAX não são mandatárias para começar, mas podem ser uma mais-valia na construção das aplicações WEB.

Angular JS first timer

Para primeiro contacto com a sintaxe Angular JS propomos a criação de um programa simples para nos familiarizarmos com a sintaxe da plataforma.

Sendo o Angular JS uma plataforma de Script o primeiro passo é incluir a plataforma, de forma a simplificar o programa iremos carregar a plataforma recorrendo a um CDN da Google.

Antes do primeiro contacto com a plataforma interessa conhecer algumas diretivas importantes:
•    ng-app: esta diretiva define que estamos perante uma aplicação Angular JS;
•    ng-model: esta diretiva efetua o binding de elementos HTML de input sobre o Modelo da aplicação;
•    ng-bind: esta diretiva é utilizada para efetuar o binding dos elementos HTML sobre a APP Angular JS ;

Conhecidas estas três diretivas vamos iniciar a construção do nosso primeiro programa AngularJS.

A componente aplicacional AngularJs tem como início a diretiva ng-app, que é colocada como atributo de uma tag HTML que tenha propriedades de contentor.

De forma a demonstrar a capacidade de binding e de manipulação da plataforma Angular JS, o nosso primeiro programa deverá ser capaz de efetuar o type de uma mensagem recolhida do ecrã.

O exemplo proposto ilustra a capacidade e simplicidade do Angular JS e binding em real time.

Para efetuar a recolha de uma mensagem e com ela alimentar o  modelo da aplicação basta utilizar a seguinte linha de código:

A tag de input foi a nossa escolha para recolha da mensagem por ser, segundo os standards do HTML, o elemento mais apropriado para o efeito, quer por uma questão de semântica quer por uma questão de funcionalidade. Ao decorar o elemento de input com este atributo estamos a definir que esta input será responsável pelo carregamento do campo msg do Modelo da aplicação.

Para apresentar o valor recolhido no modelo bastaria efetuar o bind sobre o modelo:

Compreendidos os passos a utilizar, podemos olhar para o nosso primeiro programa de Angular JS como um todo:


Partilhar:

    Fale connosco

    Interesses

      Subscrever Newsletter

      Interesses