O que é o AngularJS?

O AngularJS é uma das estruturas da Web baseadas em JavaScript mais populares usadas no desenvolvimento de front-end. É usado no desenvolvimento de aplicativos de página única (SPAs). O AngularJS é uma estrutura de código aberto mantida principalmente pelo Google e por uma comunidade de indivíduos envolvidos na resolução de problemas enfrentados no desenvolvimento de aplicativos de página única. Neste tópico, vamos aprender sobre as diretivas AngularJS.

AngularJS não é nada, mas estende o HTML existente; É adicionado na página HTML com a tag. O AngularJS torna o site HTML mais responsivo às ações do usuário, adicionando atributos adicionais facilmente. A versão estável mais recente do AngularJS é 1.6.x a partir de agora.

Diretivas do AngularJS

AngularJS é uma estrutura eficiente que suporta arquitetura baseada em Model-View-Controller (MVC). Ele fornece recursos principais, como ligação de dados bidirecional, controlador, serviços, diretivas, modelos, roteador, filtros, injeção de dependência etc. Esses são os principais recursos que trabalham em colaboração para tornar o AngularJS eficiente.

A diretiva é um dos recursos muito úteis no AngularJS. Ele estende o HTML existente e permite desenvolver páginas da Web facilmente com novo comportamento usando o JavaScript principal. Ele permite escrever nossas próprias tags personalizadas e mapeá-las no HTML existente. Essa funcionalidade oferece mais liberdade e permite aos desenvolvedores uma grande flexibilidade na criação e no uso de elementos personalizados em aplicativos da Web. Além disso, eles também podem criar suas próprias diretivas. Neste artigo, focaremos principalmente as diretivas AngularJS e tentaremos obter conhecimento desse recurso principal.

As diretivas nada mais são que marcadores nos elementos DOM do HTML, como nome do atributo, nome do elemento, classe CSS ou comentário. O compilador de AngularJS, em seguida, anexa o comportamento especificado a esse elemento. Cada diretiva tem um nome e começa com 'ng-'. Cada diretiva pode decidir onde pode ser usada nos elementos DOM. Existem algumas diretivas existentes que já estão disponíveis no AngularJS e, da mesma forma, podemos definir por conta própria.

Vamos dar uma olhada em três diretivas principais incorporadas que dividem a estrutura do AngularJS em três partes principais.

1. ng-app: Esta diretiva informa ao compilador que esse é o aplicativo AngularJS. A diretiva em que é definida no DOM se torna o elemento raiz do aplicativo. Por exemplo



AngularJS está disponível como arquivo JavaScript e é adicionado ao HTML usando a tag. O elemento ng-app at informa ao AngularJS que div é o elemento raiz e o proprietário do aplicativo AngularJS. O aplicativo AngularJS inicia nesse elemento e o código AngularJS é escrito dentro dele.

2. ng-model: Esta diretiva liga o valor da página da web, principalmente do campo de entrada à variável do aplicativo. Basicamente, essa diretiva permite enviar dados de entrada para o aplicativo AngularJS, que podem ser usados ​​em outro lugar. Por exemplo

Entrar:

A diretiva ng-model vincula o valor de entrada à variável do aplicativo denominada “input”. Vamos ver como podemos exibir o mesmo valor na página da web no próximo exemplo.

3. ng-bind: Esta diretiva vincula o valor do aplicativo AngularJS à página da web. ou seja, permite encaminhar dados do aplicativo para tags HTML. Por exemplo

Entrar:

Os dados que capturamos usando a diretiva "ng-model" na variável de aplicativo "input" são vinculados ao elemento tag

usando "ng-bind". Agora podemos executar este aplicativo e ver como o AngularJS atualiza dinamicamente o valor inserido na página.

Junto com isso, existem outras diretivas disponíveis no AngularJS que são importantes.

4. ng-repeat: Esta diretiva repete um elemento HTML e é usada em uma matriz de objetos. Essa diretiva é muito útil em cenários como a exibição de elementos de tabela em uma página da web.

5. ng-init: Esta diretiva é usada para inicializar os valores do aplicativo AngularJS antes de carregar uma página da web.

Criando novas diretivas

podemos criar nossas próprias diretivas personalizadas junto com as diretivas AngularJS disponíveis. É muito fácil criar novas diretivas usando apenas JavaScript. Novas diretivas são criadas usando “. diretiva ”. Por exemplo



var app = angular.module("appName", ());
app.directive("customDirective", function() (
return (
template : " Welcome to AngularJS Directives..! "
);
));



var app = angular.module("appName", ());
app.directive("customDirective", function() (
return (
template : " Welcome to AngularJS Directives..! "
);
));



var app = angular.module("appName", ());
app.directive("customDirective", function() (
return (
template : " Welcome to AngularJS Directives..! "
);
));

Angular.module é uma função AngularJS que cria um módulo. Criamos uma diretiva personalizada denominada diretiva personalizada para a qual a função é gravada. Sempre que usarmos essa diretiva em nossa página da web, essa função será executada. Nesse caso, é um modelo retornado que contém código HTML.

Enquanto diretiva de nomenclatura, precisamos usar a convenção de nomenclatura de maiúsculas e minúsculas e, ao invocá-la, precisamos usar a convenção de nomenclatura separada “-”.

Existem quatro maneiras pelas quais podemos invocar diretivas,

Nome do elemento

Conforme usado no último exemplo:

Atributo

Classe

Para chamar a diretiva usando o nome da classe, devemos adicionar a propriedade restringida com o valor 'C' enquanto a definimos.

app.directive("customDirective", function() (
return (
restrict : “C”,
template : " Welcome to AngularJS Directives..! "
);
));

app.directive("customDirective", function() (
return (
restrict : “C”,
template : " Welcome to AngularJS Directives..! "
);
));

app.directive("customDirective", function() (
return (
restrict : “C”,
template : " Welcome to AngularJS Directives..! "
);
));

Comente

Para invocar a diretiva usando comment, devemos adicionar uma propriedade restrita com o valor 'M' enquanto a definimos.

app.directive("customDirective", function() (
return (
restrict : “M”,
replace: true,
template : " Welcome to AngularJS Directives..! "
);
));

app.directive("customDirective", function() (
return (
restrict : “M”,
replace: true,
template : " Welcome to AngularJS Directives..! "
);
));

app.directive("customDirective", function() (
return (
restrict : “M”,
replace: true,
template : " Welcome to AngularJS Directives..! "
);
));

A propriedade replace: true é obrigatória e substituirá o comentário original pela diretiva, caso contrário o comentário seria invisível.

Conclusão - Diretivas AngularJS

Portanto, a diretiva é um recurso muito poderoso disponível no AngularJS. A diretiva permite introduzir uma nova sintaxe, é como marcadores e nos permite anexar um comportamento especial a eles. Existem diretivas disponíveis existentes no AngularJS que são muito úteis, também podemos definir nossas próprias diretivas personalizadas e usá-las. Diretivas personalizadas permitem aos desenvolvedores uma grande flexibilidade e liberdade. As diretivas adicionam novas funcionalidades ao HTML existente com estilo e recursos inovadores.

Artigos recomendados

Este é um guia para as diretivas AngularJS. Aqui discutimos as três principais diretivas internas que dividem a estrutura do AngularJS em três partes principais. Você também pode consultar os seguintes artigos para saber mais -

  1. Versões do Html
  2. Estruturas em Java
  3. Arquitetura AngularJS
  4. Estilos de lista HTML

Categoria:

Desenvolvimento de software