Directivas AngularJS

O AngularJS permite que você use uma chamada de "diretivanova propriedade "ng-app" para expandir o HTML.

O AngularJS possui um conjunto de diretivas internas, que podem fornecer funcionalidades para o seu aplicativo.

O AngularJS também permite que você defina suas próprias instruções.

Directivas AngularJS

As instruções AngularJS são atributos HTML estendidos com prefixo ng-.

ng-app A instrução inicializa o aplicativo AngularJS.

ng-init A instrução inicializa os dados do aplicativo.

ng-model As instruções ligam o valor do controle HTML (input, select, textarea) aos dados do aplicativo.

Leia mais sobre todas as instruções AngularJS em nossa referência de instruções AngularJS.

instância

<div ng-app="" ng-init="firstName='Bill'">
<p>Nome: <input type="text" ng-model="firstName"></p>
<p>Você escreveu: {{ firstName }}</p>
</div>

Experimente você mesmo

ng-app a instrução também informa ao AngularJS que o elemento <div> é o 'proprietário' do aplicativo AngularJS.

ligação de dados

no exemplo anterior {{ firstName }} expressão é uma expressão de ligação de dados do AngularJS.

A ligação de dados do AngularJS liga expressões do AngularJS com dados do AngularJS.

{{ firstName }} com ng-model="firstName" ligados juntos.

No próximo exemplo, dois campos de texto são ligados juntos por meio de duas instruções ng-model:

instância

<div ng-app="" ng-init="quantity=1;price=5">
Quantidade: <input type="number" ng-model="quantity">
Custos:    <input type="number" ng-model="price">
Total em dólares: {{ quantity * price }}
</div>

Experimente você mesmo

Usar ng-init não é muito comum. Você aprenderá como inicializar dados no capítulo sobre controladores.

repetição de elementos HTML

ng-repeat Instrução de repetição de elementos HTML:

instância

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
  <ul>
    <li ng-repeat="x in names">
      {{ x }}
    </li>
  </ul>
</div>

Experimente você mesmo

ng-repeat a instrução realmente clona cada item do conjuntoclonar um elemento HTML uma vez.

usada para arrays de objetos ng-repeat Instrução:

instância

<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>

Experimente você mesmo

O AngularJS é muito adequado para aplicativos CRUD (criar, ler, atualizar, excluir) de banco de dados.

Imaginemos que esses objetos sejam registros de um banco de dados.

Instrução ng-app

ng-app A instrução ng-init defineelemento raiz.

ao carregar a página da webng-app A instruçãoBootstrapping automáticoinicialização do aplicativo (automática).

Instrução ng-init

ng-init A instrução ng-init defineValor inicial.

Normalmente, você não usará ng-init. Você usará controladores ou módulos.

Você aprenderá mais sobre controladores e módulos mais tarde.

Instrução ng-model

ng-model As instruções ligam o valor do controle HTML (input, select, textarea) aos dados do aplicativo.

ng-model As instruções também podem:

  • Fornecer validação de tipo para os dados do aplicativo (número, e-mail, obrigatório)
  • Fornecer estado para os dados do aplicativo (inválido, sujo, tocado, erro)
  • Fornecer classes CSS para o elemento HTML
  • Ligar o elemento HTML ao formulário HTML

Leia mais sobre ng-model Informações sobre a instrução.

Criar nova instrução

Além de todas as instruções integradas do AngularJS, você também pode criar suas próprias instruções.

Uma nova instrução é criada usando .directive criado por função.

Para chamar uma nova instrução, crie um elemento HTML com o mesmo nome da marcação da nova instrução.

Ao nomear uma instrução, deve usar nomes em caixa alta (camelCase).w3TestDirectiveMas ao chamá-lo, deve usar o nome separado por -w3-test-directive:

instância

<body ng-app="myApp">
<w3-test-directive></w3-test-directive>
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
  return {
    template : "<h1>Feito por uma diretiva!</h1>"
  });
});
</script>
</body>

Experimente você mesmo

Você pode chamar a instrução da seguinte maneira:

  • Nome do elemento
  • Atributo
  • Classe
  • Comentário

Os seguintes exemplos todos gerarão o mesmo resultado:

Nome do elemento

<w3-test-directive></w3-test-directive>

Experimente você mesmo

Atributo

<div w3-test-directive></div>

Experimente você mesmo

Classe

<div class="w3-test-directive"></div>

Experimente você mesmo

Comentário

<!-- directive: w3-test-directive -->

Experimente você mesmo

Restrição

Você pode limitar sua diretiva a ser chamada apenas por alguns métodos.

instância

Ao adicionar um valor de "A" do restrict Atributo, a diretiva só pode ser chamada através de atributo:

var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
  return {
    restrict : "A",
    template : "<h1>Feito por uma diretiva!</h1>"
  });
});

Experimente você mesmo

Os valores válidos de restrict são:

  • E Representa o nome do elemento
  • A Representa atributo
  • C Representa classe
  • M Representa comentário

Pelo padrão, o valor é EA, o que significa que tanto o nome do elemento quanto o nome do atributo podem chamar a diretiva.