AngularJS permite estender HTML com novos atributos chamados directivas.
AngularJS tem um conjunto de directivas embutidos que oferece funcionalidade para suas aplicações.
AngularJS também permite definir suas próprias diretrizes.
directivas AngularJS
AngularJS directivas são estendidos atributos HTML com o prefixo ng- .
O ng-app directiva inicializa uma aplicação AngularJS.
O ng-init directiva inicializa dados da aplicação.
O ng-model directiva vincula o valor dos controles HTML (input, select, textarea) para dados de aplicativos.
Leia sobre todas as directivas AngularJS em nossos AngularJS referência directiva .
Exemplo
<div ng-app="" ng-init="firstName='John'">
<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>
</div>
Tente você mesmo " O ng-app directiva também diz AngularJS que o elemento <div> é o "dono" da aplicação AngularJS.
Ligação de dados
O {{ firstName }} expressão, no exemplo acima, é um AngularJS de dados de expressão de ligação.
Dados obrigatório em AngularJS liga expressões AngularJS com dados AngularJS.
{{ firstName }} está vinculado com ng-model="firstName" .
No próximo exemplo, dois campos de texto estão unidos com duas directivas ng-modelo:
Exemplo
<div ng-app="" ng-init="quantity=1;price=5">
Quantity: <input type="number" ng-model="quantity">
Costs: <input type="number" ng-model="price">
Total in dollar: {{ quantity * price }}
</div> Tente você mesmo "  | Usando ng-init não é muito comum. Você vai aprender como inicializar dados no capítulo sobre os controladores. |
|---|
Repetindo elementos HTML
O ng-repeat directiva repete um elemento HTML:
Exemplo
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
Tente você mesmo " O ng-repeat directiva realmente clona elementos HTML uma vez para cada item em uma coleção.
O ng-repeat directiva usado em uma matriz de objetos:
Exemplo
<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
Tente você mesmo " | AngularJS é perfeito para CRUD banco de dados (Criar Leia Atualizar Excluir) aplicações. Imaginem se esses objetos eram registros de um banco de dados. |
|---|
A directiva ng-app
O ng-app directiva define o elemento raiz de um aplicativo AngularJS.
O ng-app directiva auto-inicialização (automaticamente inicializar) a aplicação quando uma página é carregada.
A directiva ng-init
O ng-init directiva define valores iniciais para uma aplicação AngularJS.
Normalmente, você não vai usar ng-init. Você vai usar um controlador ou módulo em seu lugar.
Você vai aprender mais sobre os controladores e módulos mais tarde.
A directiva ng-modelo
O ng-model directiva vincula o valor dos controles HTML (input, select, textarea) para dados de aplicativos.
O ng-model diretiva também pode:
- Fornecer validação de tipo de dados de aplicativo (número, e-mail, é necessário).
- Fornece o status de dados de aplicativos (inválido, sujo, tocado, erro).
- Fornecer classes CSS para elementos HTML.
- elementos HTML ligam a formulários HTML.
Leia mais sobre o ng-model directiva no próximo capítulo.
Criar novas directivas
Além de todas as directivas AngularJS built-in, você pode criar suas próprias diretrizes.
Novas directivas são criados usando o .directive função.
Para chamar a nova directiva, tornar um elemento HTML com o mesmo nome de marca como a nova directiva.
Ao nomear uma directiva, você deve usar um nome caso camelo, w3TestDirective , mas quando invocá-lo, você deve usar - nome separados, w3-test-directive :
Exemplo
<body ng-app="myApp">
<w3-test-directive></w3-test-directive>
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective",
function() {
return {
template : "<h1>Made by a directive!</h1>"
};
});
</script>
</body>
Tente você mesmo " Você pode invocar uma directiva usando:
- nome do elemento
- Atributo
- Classe
- Comente
Os exemplos abaixo todos produzem o mesmo resultado:
restrições
Pode restringir as directivas apenas para ser invocada por alguns dos métodos.
Exemplo
Ao adicionar um restrict propriedade com o valor "A" , a directiva só pode ser invocada pelos atributos:
var app = angular.module("myApp", []);
app.directive("w3TestDirective",
function() {
return {
restrict : "A",
template : "<h1>Made by a directive!</h1>"
};
});
Tente você mesmo " Os valores restringem legais são:
-
Epara nome Elemento -
Ade Atributo -
Cpara a Classe -
Mfor Comment
Por padrão o valor é EA , o que significa que ambos os nomes de elementos e nomes de atributos pode invocar a directiva.