Diretivas AngularJS: ng-init, ng-app, ng-model e ng-repeat
James Hartmann
O que é diretiva em AngularJS?
A Directiva em AngularJS é um comando que fornece novas funcionalidades ao HTML. Quando o Angular passa pelo código HTML, ele primeiro encontra as diretivas na página e depois analisa a página HTML de acordo. Um exemplo simples de 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 fornecido pelo Google. Controladores são construções de programação angular de próximo nível que permitem lógica de negócios, mas, como mencionado, para que um aplicativo seja angular, não é obrigatório ter um controlador.
Como criar diretivas em AngularJS
Conforme definimos na introdução, as diretivas AngularJS são uma forma de estender a funcionalidade do HTML.
Existem 4 diretivas definidas em AngularJS.
Abaixo está a lista das diretivas AngularJS junto com exemplos fornecidos para explicar cada uma delas.
ng-app em AngularJS
Isso é usado para inicializar um aplicativo Angular.JS. Quando esta diretiva é aplicada em uma página HTML, ela basicamente informa ao Angular que esta página HTML é um aplicativo angular.js.
Exemplo de np-app
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.
<!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>
Explicação do código:
- 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.
- Como definimos este aplicativo como um aplicativo angular.js, agora podemos fazer uso da funcionalidade angular.js. No nosso caso, estamos usando expressões para simplesmente concatenar 2 strings.
Se o código for executado com sucesso, a seguinte saída será mostrada quando você executar o código no navegador.
Saída:
A saída mostra claramente a saída da expressão que só foi possível porque definimos o aplicativo como um aplicativo angularjs.
ng-init em AngularJS
Isso é usado para inicializar os dados do aplicativo. Às vezes você pode precisar de alguns dados locais para sua aplicação, isso pode ser feito com a diretiva ng-init.
Exemplo de 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.
<!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>
Explicação do código:
- A diretiva ng-init é adicionada à nossa tag div para definir uma variável local chamada “TutorialName” e o valor dado a ela é “AngularJS”.
- Estamos usando expressões em AngularJs para exibir a saída do nome da variável “TutorialName” que foi definida em nossa diretiva ng-init.
Se o código for executado com sucesso, a seguinte saída será mostrada quando você executar o código no navegador.
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.
modelo ng em AngularJS
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.
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>
Explicação do código:
- A diretiva ng-init é adicionada à nossa tag div para definir 2 variáveis locais; um é chamado de “quantidade” e o outro é “preço”.
- 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.
- 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á mostrada quando você executar o código no navegador.
Saída:
- A saída mostra claramente a multiplicação dos valores de Pessoas e Preço de Registro.
Agora, se você for até as caixas de texto e alterar o valor do preço de Pessoas e Inscrições, o Total mudará automaticamente.
- A saída acima mostra apenas o poder da vinculação de dados em angularJs, que é alcançado com o uso do diretiva do modelo ng.
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>
Explicação do código:
- 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.
- O elemento ng-repeat é usado declarando uma variável embutida chamada “nomes” e percorrendo cada elemento na matriz de capítulos.
- Finalmente, estamos mostrando o valor da variável embutida local 'nomes'.
Se o código for executado com sucesso, a seguinte saída será mostrada quando você executar o código no navegador.
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.
Resumo
- As diretivas são usadas para estender a funcionalidade do HTML. Angular fornece diretivas integradas, como
- ng-app – Isso é usado para inicializar um aplicativo angular.
- ng-init – Isso é usado para criar variáveis de aplicativo
- ng-model – Isso é usado para vincular controles HTML aos dados do aplicativo
- ng-repeat – Usado para repetir elementos usando angular.
