Diretiva AngularJS com Exemplo: ng-init, ng-repeat, ng-app, ng-model

Índice:

Anonim

O que é uma diretiva AngularJS?

Uma diretiva em AngularJS é um comando que fornece ao HTML uma nova funcionalidade. Quando o angular passa pelo código HTML, ele primeiro encontra as diretivas na página e, em seguida, analisa a página HTML de acordo.

Um exemplo simples de uma diretiva AngularJS, que vimos nos capítulos anteriores, é a "diretiva ng-model". Esta diretiva é usada para vincular nosso modelo de dados à nossa visão.

Nota: Você pode ter código angular básico em uma página HTML com as diretivas ng-init, ng-repeat e ng-model sem a necessidade de controladores. A lógica para essas diretivas está no arquivo Angular.js que é fornecido pelo Google. Os controladores são as construções de programação angular do próximo nível que permitem a lógica de negócios, mas, conforme mencionado, para um aplicativo ser um aplicativo angular, não é obrigatório ter um controlador.

Neste tutorial, você aprenderá-

  • Como Criar Diretriz
  • ng-app
  • ng-init
  • modelo ng
  • ng-repeat

Como Criar Diretriz

Conforme definimos na introdução, as diretivas AngularJS são uma forma de estender a funcionalidade do HTML.

Existem 4 diretivas definidas no AngularJS.

Abaixo está a lista de diretivas AngularJS junto com exemplos fornecidos para explicar cada uma delas.

1) ng-app

Isso é usado para inicializar um aplicativo Angular.JS. Quando essa diretiva está em vigor em uma página HTML, basicamente diz ao Angular que essa página HTML é um aplicativo angular.js.

O exemplo abaixo mostra como usar a diretiva ng-app. Neste exemplo, vamos simplesmente mostrar como transformar um aplicativo HTML normal em um aplicativo angularJS.

Event Registration

Guru99 Global Event


Tutorial Name : {{ "Angular" + "JS"}}

Explicação do código:

  1. A diretiva "ng-app" é adicionada à nossa tag div para indicar que este aplicativo é um aplicativo angular.js. Observe que a diretiva ng-app pode ser aplicada a qualquer tag, portanto, também pode ser colocada na tag body.
  2. Como definimos este aplicativo como um aplicativo angular.js, agora podemos usar a funcionalidade angular.js. Em nosso caso, estamos usando expressões para simplesmente concatenar 2 strings.

Se o código for executado com êxito, a seguinte saída será exibida quando você executar o código no navegador.

Resultado:

A saída mostra claramente a saída da expressão, que só foi possível porque definimos o aplicativo como um aplicativo angularjs.

2) ng-init

Isso é usado para inicializar os dados do aplicativo. Às vezes, você pode precisar de alguns dados locais para seu aplicativo, isso pode ser feito com a diretiva ng-init.

O exemplo abaixo mostra como usar a diretiva ng-init.

Neste exemplo, vamos criar uma variável chamada "TutorialName" usando a diretiva ng-init e exibir o valor dessa variável na página.

Event Registration

Guru99 Global Event


Tutorial Name : {{ TutorialName}}

Explicação do código:

  1. A diretiva ng-init é adicionada à nossa tag div para definir uma variável local chamada "TutorialName" e o valor dado a ela é "AngularJS".
  2. Estamos usando expressões em AngularJs para exibir a saída do nome da variável "TutorialName" que foi definido em nossa diretiva ng-init.

Se o código for executado com êxito, a seguinte saída será exibida quando você executar o código no navegador.

Resultado:

Na saída,

  • O resultado mostra claramente a saída da expressão que contém a string "AngularJS". Isso é o resultado da string "AngularJS" sendo atribuída à variável 'TutorialName' na seção ng-init.

3) modelo ng

E, finalmente, temos a diretiva ng-model, que é usada para vincular o valor de um controle HTML aos dados do aplicativo. O exemplo abaixo mostra como usar a diretiva ng-model.

Neste exemplo,

  • Vamos criar 2 variáveis ​​chamadas "quantidade" e "preço". Essas variáveis ​​serão vinculadas a 2 controles de entrada de texto.
  • Em seguida, exibiremos o valor total com base na multiplicação dos valores de preço e quantidade.

Event Registration

Guru99 Global Event


People : Registration Price : Total : {{quantity * price}}

Explicação do código:

  1. A diretiva ng-init é adicionada à nossa tag div para definir 2 variáveis ​​locais; um é chamado de "quantidade" e o outro é "preço".
  2. Agora estamos usando a diretiva do modelo ng para vincular as caixas de texto "Pessoas" e "Preço de registro" às nossas variáveis ​​locais "quantidade" e "preço", respectivamente.
  3. Finalmente, estamos mostrando o Total por meio de uma expressão, que é a multiplicação das variáveis ​​de quantidade e preço.

Se o código for executado com êxito, a seguinte saída será exibida quando você executar o código no navegador.

Resultado:

  • O resultado mostra claramente a multiplicação dos valores para o preço Pessoas e Registro.

Agora, se você for até as caixas de texto e alterar o valor do preço Pessoas e do Registro, o Total será alterado automaticamente.

  • A saída acima mostra apenas o poder da vinculação de dados em angularJs, que é obtida com o uso da diretiva ng-model.

4) ng-repeat

Isso é usado para repetir um elemento HTML. O exemplo abaixo mostra como usar a diretiva ng-repeat.

Neste exemplo,

  • Teremos uma matriz de nomes de capítulos em uma variável de matriz e
  • em seguida, use a diretiva ng-repeat para exibir cada elemento da matriz como um item de lista

Event Registration

Guru99 Global Event




    

  • {{names}}
    •

Explicação do código:

  1. A diretiva ng-init é adicionada à nossa tag div para definir uma variável chamada "capítulos", que é uma variável de array contendo 3 strings.
  2. O elemento ng-repeat é usado declarando uma variável embutida chamada "nomes" e examinando cada elemento na matriz de capítulos.
  3. Finalmente, estamos mostrando o valor da variável inline local 'nomes'.

Se o código for executado com êxito, a seguinte saída será exibida quando você executar o código no navegador.

Resultado:

  • A saída acima mostra apenas que a diretiva ng-repeat pegou cada valor no array chamado "capítulos" e criou itens de lista HTML para cada item do array.

Resumo

  • As diretivas são usadas para estender a funcionalidade do HTML. Angular fornece diretivas embutidas, como
    • ng-app - É usado para inicializar um aplicativo angular.
    • ng-init - É usado para criar variáveis ​​de aplicativo
    • ng-model - É usado para vincular controles HTML aos dados do aplicativo
    • ng-repeat - Usado para repetir elementos usando angular.