Diretiva AngularJS
AngularJS estende HTML com novas propriedades chamadas diretivas.
AngularJS adiciona funcionalidade ao aplicativo por meio de instruções internas.
O AngularJS permite que você personalize as diretrizes.
Diretiva AngularJS
A Diretiva AngularJS é um atributo HTML estendido com o prefixo ng-.
A diretiva NG-APP inicializa um aplicativo AngularJS.
A diretiva NG-Init inicializa os dados do aplicativo.
A Diretiva Modelo NG liga os valores do elemento (como o valor do campo de entrada) ao aplicativo.
Para obter instruções completas, consulte o Manual de Referência do AngularJS.
Instância de AngularJS
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </body> <body> <dody> <dbody-gody.6/angular.min.js "> </script> </body> <body> <body> <dbody-body.6/angular.min.js"> </script> </body> ng-init = "FirstName = 'John'"> <p> Tente entrar na caixa de entrada: </p> <p> Nome: <input type = "text" ng-model = "FirstName"> </p> <p> você tipou como: {{FirstName}} </p> </div> </body </ht {{FirstName}} </p> </div> </body> </hmlResultados em execução:
Tente entrar na caixa de entrada:
Nome:
O que você digitou é: John
A diretiva NG-APP diz ao AngularJS que o elemento <div> é o "proprietário" do aplicativo AngularJS.
Nota: Uma página da web pode conter vários aplicativos AngularJS em execução em diferentes elementos.
Ligação de dados
A expressão {{FirstName}} no exemplo acima é uma expressão de ligação de dados do AngularJS.
Ligação de dados em angularJs, sincronizando expressões angulares e dados angularjs.
{{FirstName}} é sincronizado por ng-model = "FirstName".
No próximo exemplo, os dois campos de texto são sincronizados por duas diretivas de model NG:
Instância de AngularJS
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head><body><div data-ng-app="" Data-ng-init = "Quantidade = 1; Preço = 5"> Quantidade da calculadora de preços: <input type = "número" ng-model = "Quantity"> Preço: <input type = "number" ng-model = "Price"> <p> <b> Preço: </b> {{Quantity * Price}} </P>Resultados em execução:
Calculadora de preços
quantidade: preço:
Preço total: 5
NOTA: O uso de Ng-init não é muito comum. Você aprenderá uma maneira melhor de inicializar os dados no capítulo do controlador.
Repita elementos HTML
A diretiva NG-REPEAT repete um elemento HTML:
Instância de AngularJS
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head><body><div data-ng-app="" data-ng-init = "nomes = ['jani', 'hege', 'kai']"> <p> use ng-repeat para fazer matrizes </p> <ul> <li data-ng-repeat = "X em nomes"> {{x}} </li> </ul> </div> </body> </html>Use Ng- Repita para loop da matriz
A diretiva NG-REPEAT é usada em uma variedade de objetos:
Instância de AngularJS
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </body> <body> <dody> <dbody-gody.6/angular.min.js "> </script> </body> <body> <body> <dbody-body.6/angular.min.js"> </script> </body> ng-init = "nomes = [{nome: 'jani', país: 'noruega'}, {name: 'hege', country: 'sueden'}, {name: 'kai', country: 'Dinamarca'}] }} </li> </ul> </div> </body> </html>Objeto de loop:
O NotAanGularJS suporta perfeitamente o banco de dados CRUD (adicione aplicativos Create, Read, Atualize Atualizar, Excluir Excluir).
Pense nos objetos em uma instância como registros em um banco de dados.
Comando Ng-App
A diretiva NG-APP define o elemento raiz de um aplicativo AngularJS.
A diretiva NG-APP inicializa automaticamente (inicializa automaticamente) o aplicativo quando a página da web é carregada.
Mais tarde, você aprenderá como o NG-App se conecta a um módulo de código através de um valor (como ng-app = "myModule").
Diretiva Ng-Init
A diretiva NG-Init define o valor inicial para o aplicativo AngularJS.
Normalmente, Ng-init não é usado. Você usará um controlador ou módulo.
Você aprenderá mais sobre controladores e módulos posteriormente.
comando ng-modelo
Modelo Ng A diretiva liga os elementos HTML aos dados do aplicativo.
Modelo Ng As instruções também podem ser:
Fornece verificação de tipo (número, email, obrigatório) para dados do aplicativo.
Fornece Estado (inválido, sujo, tocado, erro) para dados do aplicativo.
Fornece uma classe CSS para elementos HTML.
Vincule os elementos HTML ao formulário HTML.
Diretiva Ng-Repeat
O NG-REPEAT Directive clones HTML Elements uma vez para cada item da coleção (em uma matriz).
Criar diretrizes personalizadas
Além das diretivas internas no AngularJs, também podemos criar diretrizes personalizadas.
Você pode usar a função. Diretiva para adicionar diretrizes personalizadas.
Para chamar uma diretiva personalizada, você precisa adicionar um nome de diretiva personalizado ao elemento HTML.
Use o método camel para nomear uma diretiva, runoobdirective, mas ao usá-lo, você precisa dividir, runOob-Directive:
Instância de AngularJS
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head><body><body ng-App = "MyApp"> <runOob-Direction> </nondoob-Direction> <cript> var app = angular.module ("myApp", []); App.Directive ("RUNOOBDIRECTION", function () {Return {model: "Custom Directive!"};});Resultados em execução:
Comandos personalizados!
Você pode ligar para a diretiva das seguintes maneiras:
Nome do elemento
propriedade
Nome da classe
Comentários
Os exemplos a seguir também podem gerar o mesmo resultado:
Nome do elemento
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head><body><body ng-App = "MyApp"> <runOob-Direction> </nondoob-Direction> <cript> var app = angular.module ("myApp", []); App.Directive ("RUNOOBDIRECTION", function () {Return {model: "Custom Directive!"};});Resultados em execução:
Comandos personalizados!
propriedade:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </body> <body> <body> <body-body-body-gpodpypp/bodypp (/body-body-body.6.6.6/bodypps/bodypp (/script> </body-body-body ng ng ng ng ng "</script> </body> <body> RUNOOB-DIRECTION> </div> <cript> var app = angular.module ("myApp", []); App.Directive ("RUNOOBDIRECTION", function () {return {Model: "Diretiva personalizada!"};}); </script> </body> </body> </html>Resultados em execução:
Comandos personalizados!
Nome da classe:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> angular.module ("myApp", []); App.Directive ("RUNOOBDIRECTION", function () {return {Restritt: "C", modelo: "C"! "};}); </p> </body> </html>Comandos personalizados!
NOTA: Você deve definir o valor do restrito como "C" para chamar a diretiva pelo nome da classe.
Notas:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body n- n- n- n- ng = "> </script> </body-brods/1.4.6/born.in:" --><script>var app = angular.module("myApp", []);app.directive("runoobDirective", function() { return { restrict : "M", replace : true, template : "Custom directive!" };});</script><p><strong>Note:</strong> We need to add the <strong>replace</strong> attribute to this instance, otherwise the comments will not be visível. </p> <p> <strong> Nota: </strong> Você deve definir o valor de <b> restringir </b> como "M" para invocar a diretiva por meio de comentários. </p> </body> </html>Resultados em execução:
Comandos personalizados!
Nota: precisamos adicionar o atributo Substituir a esta instância, caso contrário, os comentários não serão visíveis.
NOTA: Você deve definir o valor do restrito como "M" para chamar a diretiva por meio de comentários.
Uso restrito
Você pode restringir suas diretivas a serem chamadas apenas de maneiras específicas.
Exemplo
Ao adicionar a propriedade restrita e definir apenas o valor para "A", o comando só pode ser chamado por meio de atributos:
Exemplo Código:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body NG-APP = "MyApp"> <runOob-Direction> </nondoob-Direction> <div Runoob-Directive> </div> <cript> var app = angular.module ("myApp", []); App.Directive ("RunoObdirection", FUNCT () {Return {Restrt: "A" Automotor,, "Modeleting," Matteren, "Automotor," Automotor, "Automotor (Template," Matrize, };}); </script> <p> <strong> Nota: </strong> A definição da diretiva só pode ser chamada através dos atributos dos elementos html, definindo o valor <strong> restringido </strong> para "A". </p> </body> </html>Resultados em execução:
Comandos personalizados!
Nota: O comando de configuração só pode ser chamado definindo o valor do atributo restrito como "A".
O valor restrito pode ser o seguinte:
E apenas usamos nomes de elementos
A propriedades estão disponíveis apenas
C apenas use nomes de classe
M está disponível apenas para comentários
O valor padrão do restrito é o EA, ou seja, o comando pode ser chamado através do nome do elemento e do nome do atributo.
O exposto acima é a compilação de informações de instrução angularjs e continuará sendo complementada posteriormente