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.
“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.
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:
Alexandre Marreiros – Technical Director (CTO) na Innovagency
Workshop Get Started With Angular JS
Partilhar:
