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

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.

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

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.

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

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.

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

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.

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

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

• 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

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

• 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