Iniciando com AngularJS

Bom pessoal, hoje vamos falar sobre um assunto que esta em alta no mercado de desenvolvimento web.

Nada mais nada menos que o AngularJS, um framework JavaScript para desenvolvimento de aplicações web.

Este poderoso framework JavaScript estende atributos HTML com diretivas e liga-se a dados da aplicação por meio de expressões.

As principais caracteristicas do AngularJS são:
– Estende HTML com novos atributos
– Perfeito para SPAs (Aplicações de páginas únicas)
– Fácil aprendizado

Antes de por a mão na massa precisamos realizar o download do AngularJS. Para isso basta acessar o website AngularJS.

Temos duas opções de download, a versão minificada e a versão full. A versão minificada é a que devemos utilizar em produção, visto que ela não contém comentários e identação. A versão full possui comentários e identação, tornando o arquivo maior e mais fácil de ser compreendido. Ainda temos a opção de utilizar o AngularJS sem download, utilizando apenas o link da sua distribuição. No exemplo de hoje vamos usar a versão 1.4.0-beta.6 disponível aqui.

Nosso primeiro passo é importar o AngularJS na nossa página HTML utilizando a tag <script>.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.6/angular.min.js"></script>
</head>
<body>
</body>
</html>

Antes de executar o próximo passo precisamos saber sobre 3 (três) diretivas utilizadas no AngularJS. São elas:

ng-app Diretiva que define uma aplicação AngularJS
ng-model Diretiva que vincula os elementos HTML (input, select, textarea) aos dados da aplicação
ng-bind Diretiva que vincula os dados da aplicação para a página HTML

Vale ressaltar que não temos apenas essas 3 (três) diretivas, temos muitas outras.

No nosso segundo passo iremos realizar o uso dessas diretivas explicadas anteriormente. Temos a definição de uma aplicação AngularJS (ng-app), a definição de um modelo (ng-model) e a definição do vinculo dos dados da aplicação para a página HTML (ng-bind).

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.6/angular.min.js"></script>
</head>
<body>
<div ng-app="">
 <p>Nome: <input type="text" ng-model="nome"></p>
 <p ng-bind="nome"></p>
</div>
</body>
</html>

Podemos ver o resultado no exemplo 1 a seguir. Onde ao digitar no campo de texto nome automaticamente temos a exibição do valor digitado abaixo do campo de texto.

Exemplo 1

 Exemplo 1

Podemos ainda melhorar este nosso exemplo, utilizando as expressões. As expressões realizam praticamente o mesmo trabalho da diretiva ng-bind, vinculam os dados da aplicação com as páginas HTML. Para utilizar as expressões precisamos declarar da seguinte maneira {{meuModelo}}.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.6/angular.min.js"></script>
</head>
<body>
<div ng-app="">
<p>Nome: <input type="text" ng-model="nome"></p>
<p>Oi meu nome é {{nome}}</p>
</div>
</body>
</html>

Podemos ver o resultado no exemplo 2 a seguir. Onde ao digitar no campo de texto nome automaticamente temos a exibição do valor digitado abaixo do campo de texto, semelhante ao exemplo 1 só que agora utilizando expressões.

Exemplo 2

Exemplo 2

Bom pessoal, hoje aprendemos como iniciar uma aplicação, utilizar diretivas e expressões com o framework JavaScript AngularJS.

Abraços e até a próxima.

Referências:

https://angularjs.org/
http://www.w3schools.com/angular/
https://www.youtube.com/user/angularjs

Por ALTIERES DE MATOS

Tio da Nanah, Arquiteto de Software, Professor, Blogueiro e Amante da Zueira.

Postado em: 02 de abril de 2015

Confira outros artigos do nosso blog

REST não é JSON

21 de agosto de 2017

Bruno Sofiato

[Webinar] Profile de aplicações Java com Oracle Mission Control e Flight Recorder

24 de julho de 2017

Danival Calegari

Criando Mocks de serviços REST com SoapUI

27 de junho de 2017

Monise Costa

JavaScript 6: diferença entre var, let e const

09 de maio de 2017

Otávio Felipe do Prado

Deixe seu comentário