Amigos familiarizados com o HTML sabem que o HTML tem muitos atributos. Por exemplo, o atributo href da tag <a> pode especificar o endereço URL do link e o atributo de tipo da tag <input> pode ser usado para especificar o tipo de entrada. A diretiva AngularJS adiciona funções aos aplicativos AngularJS, estendendo os atributos HTML.
A diretiva angularJS é usada para estender o HTML. Todas essas são propriedades especiais que começam com o prefixo NG. Discutiremos as seguintes diretivas:
Diretivas Angularjs comumente usadas
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.
Comando Ng-App
A diretiva NG-APP inicia um aplicativo AngularJS. Ele define o elemento raiz. Ele inicializa ou inicia automaticamente um aplicativo que carrega as páginas da Web do aplicativo AngularJS. Também é usado para carregar várias aplicações AngularJS Modules AngularJS. No exemplo a seguir, definimos o aplicativo AngularJS padrão usando o atributo NG-App do elemento div.
<div ng-app = ""> ... </div>
Diretiva Ng-Init
A diretiva NG-Init inicializa os dados de um aplicativo AngularJS. É usado para colocar valores no aplicativo para usar variáveis. No exemplo a seguir, inicializaremos a matriz dos países. Use a sintaxe do JSON para definir matrizes de países.
<div ng-app = "" ng-init = "países = [{Locale: 'en-us', nome: 'United States'}, {Locale: 'en-gb', nome: 'United Kingdom'}, {Locale: 'En-Fr', Nome: 'France'}]"> ... </div>comando ng-modelo
A Diretiva NG-Modelo define modelos/variáveis usadas em aplicações AngularJS. No exemplo a seguir, definimos um modelo chamado "Nome".
<div ng-app = ""> ... <p> Digite seu nome: <input type = "text" ng-model = "name"> </p> </div>
Diretiva Ng-Repeat
A diretiva NG-REPEAT repete cada item na coleção de elementos HTML. No exemplo seguinte, iteramos os países da matriz.
<Div ng-app = ""> ... <p> Lista de país com localidade: </p> <l> <li ng-repeat = "país em países"> {{'country:' + country.name + ', loce:' + country.locale}} </li> </ol>Exemplo de diretiva AngularJS
<div ng-app = "" ng-init = "primeironame = 'John'"> <p> Tente entrar na caixa de entrada: </p> <p> Nome: <input type = "text" ng-model = "FirstName"> </p> <p> o que você digita é: {{FirstName}} </P>A diretiva NG-APP diz ao AngularJS que o elemento atual <div> é um aplicativo AngularJS. A diretiva NG-Init é usada para inicializar dados, o que é equivalente à variável de definição no JavaScript. Ligação de dados em angularJs, sincronizando expressões angulares e dados angularjs. {{FirstName}} é sincronizado por ng-model = "FirstName". O exemplo acima sincronizará o conteúdo inserido na caixa de entrada na página.
Perceber
Uma página da web pode conter vários aplicativos AngularJS em execução em diferentes elementos.
Não é muito comum inicializar dados usando NG-Init. Você aprenderá uma maneira melhor de inicializar seus dados nos capítulos subsequentes.
Diretiva Ng-Repeat
A diretiva NG-REPEAT repetirá um elemento HTML, que é equivalente a cada loop em JavaScript.
<div ng-app = "" ng-init = "nomes = ['jani', 'hege', 'kai']"> <p> use ng-repeat para fazer matrizes </p> <ul> <li ng-repeat = "X em nomes"> {{x}} </li> </ult> </div>O exemplo acima será analisado no seguinte HTML
<ul> <li> Jani </li> <li> Hege </li> <li> Kai </li> </ul>
NG-REPEAT funciona na matriz de objetos:
<div ng-app = "" ng-init = "nomes = [{name: 'jani', país: 'Noruega'}, {name: 'hege', country: 'sweden'}, {name: 'kai', country: 'Dinmark'}]"> <p> x.country}} </li> </ul> </div>Ele será analisado no seguinte HTML:
<ul> <li> Jani, Noruega </li> <li> Hege, Suécia </li> <li> Kai, Dinamarca </li> </ul>
Comandos personalizados
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, AskH5Direction, mas ao usá -lo, você precisa se dividir com - Askh5 -Direction
<corpo ng-app = "myApp"> <Akh5-Direction> </akh5-Direction> <cript> var app = angular.module ("myApp", []); app.directive ("Askh5Direction", function () {return {model: "<h1> Diretivo!O exemplo acima é analisado como:
<H1> Comando personalizado! </h1>
O comando pode ser chamado das seguintes maneiras:
Nome do elemento: <Akh5-Direction> </soth5-Directive>
Atributo: <div akh5-Directive> </div>
Nome da classe: <div> </div>
Comentário: <!-Diretiva: Askh5-Diretiva->
Restringir o uso de restrição
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.
var app = angular.module ("myApp", []); App.Directive ("AskH5Direction", function () {return {Restritt: "A", modelo: "<h1> Diretiva personalizada! </h1>"};});AngularJS acima permitirá apenas chamadas de propriedade.
Leituras relacionadas:
Tutorial Introdutório de AngularJS: Expressões AngularJS
O conteúdo acima é o tutorial introdutório do AngularJS do AngularJS apresentado a você pelo editor. Espero que seja útil para todos!