Portal GSTI
Portal GSTI

PublicarCadastre-seLogin
Menu
Publicação

O que são diretivas no AngularJS e como usar

foto de
Jorge Massari CONTEÚDO EM DESTAQUE

AngularJS

AngularJS é um Framework em javascript, de código aberto e que é mantido pelo Google. Seu objetivo é aumentar aplicativos que podem ser acessados por um navegador web e tem como padrão o MVVM (Model-View-View-Model), em um esforço para facilitar tanto o desenvolvimento quanto o teste dos aplicativos.
Para saber mais, acesse: O que é 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-classPermite atributos de classe serem carregados dinamicamente.
ng-clickPermite instanciar o evento de click, semelhante ao onclick.
ng-controllerEspecifica um controller JavaScript para aquele HTML em questão.
ng-repeatInstancia um elemento por item de um array.
ng-show & ng-hideMostra ou esconde um elemento HTML de acordo com o resultado de uma expressão booleana.
ng-switchInstancia um template, em uma lista de escolhas, dependendo do valor obtido pela expressão.
ng-viewA diretiva base para manipulação de rotas, resolvendo um JSON antes de renderizar os modelos acionados por controladores especificados.
ng-ifDeclaraçã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.


Continue estudando AngularJS: 

Comentários