Diretivas AngularJS: ng-init, ng-app, ng-model e ng-repeat

Por: James Hartmann James Hartmann
Hours Atualização do

⚡ Resumo Inteligente

As diretivas do AngularJS estendem o HTML simples com novos comportamentos. Os marcadores ng-app, ng-init, ng-model e ng-repeat inicializam uma aplicação, preenchem dados locais, vinculam controles de formulário ao modelo e clonam elementos uma vez por item de coleção.

  • 🧩 Ideia central: Uma diretiva é um marcador em um elemento HTML que instrui o compilador AngularJS a atribuir um comportamento a ele.
  • 🚀 Bootstrap Point: O ng-app declara o elemento raiz e inicia automaticamente o AngularJS assim que a página é carregada.
  • 🧮 Dados Locais: O ng-init atribui valores iniciais às variáveis ​​de escopo dentro da marcação, sem a necessidade de um controlador.
  • 🔄 Encadernação bidirecional: O ng-model vincula um input, select ou textarea a uma propriedade de escopo, de modo que as edições atualizem o modelo instantaneamente.
  • 📋 Marcação repetida: ng-repeat clona o elemento hospedeiro uma vez para cada item em um array ou objeto.
  • 🎛️ Quatro formas de invocação: A propriedade `restrict` aceita os caracteres E, A, C e M para representar a sintaxe de elemento, atributo, classe e comentário.
  • 📚 Biblioteca Ampliada: AngularJS fornece dezenas de diretivas integradas, entre elas ng-bind, ng-if, ng-show, ng-class e ng-click.
Saiba Mais

Diretivas AngularJS

O que é diretiva em AngularJS?

A Directiva Em AngularJS, um comando adiciona novas funcionalidades ao HTML. Quando o AngularJS percorre o código HTML, ele primeiro encontra as diretivas na página e, em seguida, analisa o HTML de acordo. Um exemplo simples de diretiva AngularJS, que vimos em capítulos anteriores, é a diretiva "ng-model". Essa diretiva é usada para vincular nosso modelo de dados à nossa visualização.

Observação: Você pode ter código AngularJS básico em uma página HTML com as diretivas ng-init, ng-repeat e ng-model sem a necessidade de Controllers. A lógica dessas diretivas está no arquivo AngularJS fornecido por GoogleOs controladores são construções de programação AngularJS de nível superior que permitem a implementação da lógica de negócios, mas, como mencionado, para uma aplicação ser considerada uma aplicação AngularJS, não é obrigatório ter um controlador.

Mas como é que um navegador acaba executando um?

Como as diretivas do AngularJS funcionam no HTML

Como definimos na introdução, uma diretiva AngularJS é uma forma de estender a funcionalidade de HTMLQuando a página é carregada, o compilador AngularJS percorre o DOM, compara cada elemento com as diretivas registradas e aplica o comportamento encontrado.

AngularJS O sistema vem com dezenas de diretivas integradas, além de quaisquer outras que você registre. As quatro explicadas abaixo com exemplos práticos — ng-app, ng-init, ng-model e ng-repeat — são as primeiras que os iniciantes encontram. Antes desses exemplos, observe as quatro maneiras pelas quais uma diretiva pode ser escrita.

Quais são os quatro tipos de diretivas do AngularJS?

Uma diretiva nem sempre é um atributo. O compilador AngularJS pode identificar uma diretiva pelo nome do elemento, atributo, nome da classe ou comentário, e cada diretiva declara quais formas aceita por meio de sua formatação. restrict propriedade. O padrão é EAPortanto, a sintaxe de elemento e atributo funciona, a menos que você especifique o contrário. O valor é mais importante quando você escreve sua própria diretiva, porque o compilador ignora qualquer forma que o valor de `restrict` exclua.

restringir valor Correspondido por Exemplo de marcação Uso típico
E Nome do elemento Blocos independentes que possuem um modelo.
A Atributo Adicionando comportamento a um elemento existente
C Nome da classe Marcação legada que não aceita novos atributos.
M Comentário Raro, mantido para compatibilidade com versões anteriores.

💡 Dica: Prefira a sintaxe de elemento e atributo. Referência oficial de diretivas do AngularJS Trata formulários de classe e comentários como opções legadas. Os exemplos abaixo usam sintaxe de atributo.

ARTIGOS RELACIONADOS

ng-app em AngularJS

Esta diretiva é usada para inicializar uma aplicação AngularJS. Quando presente em uma página HTML, ela basicamente informa ao AngularJS que esta página HTML é uma aplicação AngularJS.

Exemplo de ng-app

O exemplo abaixo mostra como transformar uma aplicação HTML comum em uma aplicação AngularJS.

ng-app em AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="">

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

</div>

</body>
</html>

⚠️ Atenção: O anúncio mantém o original. chrset="UTF 8", exatamente como publicado. O atributo correto é charset="UTF-8".

Code Explicação:

  1. A diretiva “ng-app” é adicionada à nossa tag div para indicar que esta aplicação é uma aplicação AngularJS. Observe que a diretiva ng-app pode ser aplicada a qualquer tag, portanto, também pode ser inserida na tag body.
  2. Como definimos esta aplicação como uma aplicação AngularJS, agora podemos utilizar as funcionalidades do AngularJS. No nosso caso, estamos usando expressões para simplesmente concatenar duas strings.

Se o código for executado com sucesso, a seguinte saída será exibida.

Saída:

ng-app em AngularJS

O resultado mostra claramente o efeito da expressão, o que só foi possível porque definimos a aplicação como uma aplicação AngularJS. A próxima diretiva fornece os seus dados.

ng-init em AngularJS

Isso é usado para inicializar os dados da aplicação. Às vezes, você pode precisar de alguns dados locais para sua aplicação, e isso pode ser feito com a diretiva ng-init.

Exemplo de 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.

ng-init em AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="" ng-init="TutorialName='Angular JS'">

    Tutorial Name : {{ TutorialName}}

</div>

</body>
</html>

Code Explicação:

  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 o resultado da variável chamada “TutorialName”, que foi definida em nossa diretiva ng-init.

Se o código for executado com sucesso, a seguinte saída será exibida.

Saída:

ng-init em AngularJS

Na saída,

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

A próxima diretiva envia dados da tela de volta para o modelo.

modelo ng em AngularJS

E, por fim, temos a diretiva ng-model, que é usada para vincular o valor de um controle HTML aos dados do aplicativo.

Exemplo de modelo ng

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.

modelo ng em AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="" ng-init="quantity=1;price=5">

    People : <input type="number" ng-model="quantity">

    Registration Price : <input type="number" ng-model="price">

    Total : {{quantity * price}}

</div>

</body>
</html>

Code Explicação:

  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. Por fim, mostramos o Total por meio de uma expressão, que é a multiplicação das variáveis ​​quantidade e preço.

Se o código for executado com sucesso, a seguinte saída será exibida.

Saída:

modelo ng em AngularJS

  • A saída mostra claramente a multiplicação dos valores de Pessoas e Preço de Registro.

Agora, se você alterar os valores de "Pessoas" e "Preço de inscrição" nas caixas de texto, o Total será alterado automaticamente.

modelo ng em AngularJS

  • O resultado acima demonstra o poder do data binding no AngularJS, que é alcançado com o uso do diretiva do modelo ng.

O último dos quatro processa vários valores simultaneamente.

ng-repetir em AngularJS

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

Exemplo de repetição ng

Neste exemplo,

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

ng-repetir em AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="" ng-init="chapters=['Controllers','Models','Filters']">
    <ul>
        <li ng-repeat="names in chapters">
            {{names}}
        </li>
    </ul>

</div>

</body>
</html>

Code Explicação:

  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 percorrendo cada elemento na matriz de capítulos.
  3. Finalmente, estamos mostrando o valor da variável embutida local 'nomes'.

Se o código for executado com sucesso, a seguinte saída será exibida.

Saída:

ng-repetir em AngularJS

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

Esses quatro elementos abrangem inicialização, dados, vinculação e repetição. A lista abaixo mostra o que vem a seguir.

Outras diretivas integradas do AngularJS comumente usadas

As quatro diretivas acima são o conjunto inicial, não a biblioteca completa. Cada entrada abaixo é um atributo que você coloca diretamente no elemento que ele controla.

  • ng-bind: Insere um valor de escopo no texto de um elemento sem exibir brevemente as chaves brutas ao carregar a página.
  • ng-if: Remove o elemento do DOM quando sua expressão for falsa e o recria quando for verdadeira.
  • ng-show e ng-hide: Toggle visibilidade com CSS. O elemento permanece no DOM, portanto, alternâncias repetidas têm um custo menor.
  • ng-class: Adiciona ou remove classes CSS de uma expressão, permitindo que o estilo siga o modelo.
  • ng-click: Executa uma expressão ou uma função de escopo quando o usuário clica no elemento.
  • ng-controller: Anexa um controlador a um bloco de marcação quando a página ultrapassa os limites do ng-init.
  • ng-disabled e ng-readonly: Defina o atributo de formulário correspondente sempre que a expressão for verdadeira.

As perguntas frequentes abaixo respondem às dúvidas mais comuns que surgem após esta lista.

Perguntas Frequentes

O AngularJS normaliza os nomes dos atributos antes de compará-los. Ele remove qualquer prefixo "x-" ou "data-" e, em seguida, converte os separadores hífen, dois pontos ou sublinhado em camelCase. É por isso que data-ng-app, x-ng-app e ng:app são todos resolvidos para a mesma diretiva ngApp.

Ambos imprimem um valor de escopo. Uma expressão de interpolação pode exibir brevemente suas chaves brutas antes que o AngularJS termine de carregar, enquanto o ng-bind deixa o elemento vazio até que a compilação seja concluída. Prefira o ng-bind para texto que aparece acima da dobra.

Não. O suporte oficial para AngularJS terminou em janeiro de 2022, portanto, não serão lançadas mais atualizações. As páginas existentes continuarão funcionando, mas novos projetos devem ser iniciados no Angular moderno, onde essas diretivas se tornam componentes e diretivas estruturais como *ngIf e *ngFor.

Em parte. Assistentes como Copiloto do GitHub Reescrever ng-repeat como *ngFor e ng-if como *ngIf de forma confiável. Herança de escopo, vinculações bidirecionais e funções de link personalizadas ainda precisam de revisão humana antes da publicação do código migrado.

Cole o código HTML, a declaração do módulo e a saída do console em ChatGPT e pergunta qual diretiva não foi correspondida. Geralmente, ela detecta a ausência de um ng-app, um atributo com erro de ortografia ou um valor de restrição que bloqueia a sintaxe escolhida.

Resuma esta postagem com: