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:
