JPlol

domingo, 10 de julho de 2016

AngularJS - Directivas

Directivas

As diretivas AngularJS são usadas para estender o HTML. São atributos especiais que começam com o prefixo -ng. Vamos analisar:

ng-app - Define e linka uma aplicação AngularJS com o HTML.
ng-model - Linka os valores de dados da aplicação AngularJS com o HTML para inserir dados.
ng-bind - Linka os dados da aplicação com as tags HTML.
ng-repeat - Repete elementos HTML para cada item em uma collection.

ng-app

O ng-app inicia uma aplicação AngularJS. Ele define o elemento raiz. Ele automaticamente inicializa ou força a aplicação a carregar. Ele também é usado para carregar vários módulos AngularJS em uma aplicação. No seguinte exemplo, nós definimos uma aplicação AngularJS padrão usando o atributo ng aplicação de um elemento div.


<div ng-app = "">

...

</div>

ng-init

Inicializa dados de uma aplicação. É utilizado para colocar os valores para as variáveis a serem usadas na aplicação. No seguinte exemplo, vamos inicializar uma matriz de países. Nós estamos usando a sintaxe JSON para definir conjunto de países.


<div ng-app = "" ng-init = "countries = [{locale:'en-US',name:'United States'}, {locale:'en-GB',name:'United Kingdom'}, {locale:'en-FR',name:'France'}]">

...

</div>

ng-model

Define a model/variável para ser utilizada na aplicação. No seguinte exemplo, temos a model chamada "name".


<div ng-app = "">

...

   <p>Insira seu nome: <input type = "text" ng-model = "name"></p>

</div>

ng-repeat

Repete elementos HTML para cada item em uma coleção. No seguinte exemplo, nós repetimos uma série de países.


<div ng-app = "">

...

   <p>Lista de países:</p>

   <ol>

      <li ng-repeat = "country in countries">

{{ 'Country: ' + country.name + ', Locale: ' + country.locale }}

      </li>

   </ol>

</div>

Exemplo completo:


<html>

   <head>

      <title>AngularJS</title>

   </head>

   <body>

      <h1>Países</h1>

      <div ng-app = "" ng-init = "countries = [{locale:'en-US',name:'United States'}, {locale:'en-GB',name:'United Kingdom'}, {locale:'en-FR',name:'France'}]"> 

         <p>Insira o nome de seu país: <input type = "text" ng-model = "name"></p>

         <p>Meu país =  <span ng-bind = "name"></span>!</p>

         <p>Lista de países:</p>

         <ol>

            <li ng-repeat = "country in countries">

{{ 'País: ' + country.name + ', Locale: ' + country.locale }}

            </li>

         </ol>

      </div>

      <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

   </body>

</html>

Saída:

Primeira Aplicação

Antes de começar com a criação de aplicação usando o AngularJS, vamos ver quais são as partes reais de uma aplicação AngularJS. Uma aplicação AngularJS consiste em seguir três partes importantes.

ng-app - Define e linka uma aplicação AngularJS com o HTML.
ng-model - Linka os valores de dados da aplicação AngularJS com o HTML para inserir dados.
ng-bind - Linka os dados da aplicação com as tags HTML.

Passos para criar uma aplicação AngularJS:

Passo 1 - Carregar framework

Sendo um framework JavaScript puro, ele pode ser adicionado usando a tag <script>.

<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>

Passo 2 - Definir uma aplicação AngularJS utilizando a diretiva ng-app

<div ng-app = "">
   ...
</div>

Passo 3 - Defina o nome da model utilizando a diretiva ng-model

<p>Insira seu nome: <input type = "text" ng-model = "name"></p>

Passo 3 - Vincular o valor da model utilizando a diretiva ng-bind.

<p>E aee \0/ <span ng-bind = "name"></span>!</p>

Utilize as três etapas acima em uma página HTML.

Nome do arquivo: teste_angular.html

<html>
   
   <head>
      <title>AngularJS</title>
   </head>
   
   <body>
      <h1>Primeira Aplicação</h1>
      
      <div ng-app = "">
         <p>Insira seu nome: <input type = "text" ng-model = "name"></p>
         <p>E aee \0/ <span ng-bind = "name"></span>!</p>
      </div>
      
      <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
      
   </body>
</html>

Resultado:

Integração do AngularJS com HTML

ng-app: indica o início da aplicação AngularJS.

ng-model: cria uma variável model chamada "name" que pode ser usada com a página html e dentro da div tendo a diretiva ng-app.

ng-bind: usa a model de name a ser exibida na tag span html sempre que o usuário inserir algo na caixa de texto.

O fechamento da tag </ div> indica o fim da aplicação AngularJS.