AngularJS
O que São Diretivas no AngularJS
Diretivas no AngularJS
Diretivas são extensões da linguagem HTML, que fornecem a possibilidade de estender/ampliar o comportamento de elementos HTML. Este recurso permite a implementação de novos comportamentos de forma declarativa.
Ao selecionar um elemento HTML, a diretiva pode ampliar seu comportamento de diversas formas:
- para adicionar um novo HTML,
- associar eventos à funções Javascript,
- manipular o DOM.
Exemplo de Diretivas no AngularJS
| ng-app | Declara um elemento como o elemento raiz da aplicação, ocasionando a mudança do comportamento padrão da tag. |
| ng-bind | Muda o texto de um elemento HTML automaticamente, de acordo com o seu resultado, vindo das regras de negócio. |
| ng-model | É similar ao ng-bind, mas permite ligação direta bidirecional (two-way data binding ) entre a view e o escopo do aplicativo. |
| ng-class | Permite atributos de classe serem carregados dinamicamente. |
| ng-click | Permite instanciar o evento de click, semelhante ao onclick. |
| ng-controller | Especifica um controller JavaScript para aquele HTML em questão. |
| ng-repeat | Instancia um elemento por item de um array. |
| ng-show & ng-hide | Mostra ou esconde um elemento HTML de acordo com o resultado de uma expressão booleana. |
| ng-switch | Instancia um template, em uma lista de escolhas, dependendo do valor obtido pela expressão. |
| ng-view | A diretiva base para manipulação de rotas, resolvendo um JSON antes de renderizar os modelos acionados por controladores especificados. |
| ng-if | Declaração básica de um 'if' que permite mostrar um elemento se a condição for verdadeira. |
Exemplos de Uso das Diretivas no AngularJS
A seguir, um exemplo de uso das diretivas ng-app, ng-bind e ng-model
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
</body>
</html>Explicando o Exemplo:
- O AngularJS é iniciado automaticamente quando a página da Web foi carregada.
- A diretiva ng-app diz ao AngularJS que o elemento <div> é o "proprietário" de um aplicativo AngularJS.
- A diretriz do modelo ng-model vincula o valor do campo de entrada ao nome da variável da aplicação.
- A diretriz ng-bind liga o innerHTML do elemento <p> ao nome da variável da aplicação.
Videoaula sobre Diretivas no AngularJS
Caso deseje complementar seus estudos, indico a videoaula a seguir, ministrada e disponibilizada no YouTube por José Naves Moura Neto.
