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:
Nenhum comentário:
Postar um comentário