¿Qué es AngularJS?

AngularJS es uno de los marcos web basados ​​en JavaScript más populares utilizados en el desarrollo front-end. Se utiliza en el desarrollo de aplicaciones de página única (SPA). AngularJS es un marco de código abierto que es mantenido principalmente por Google y por una comunidad de personas involucradas en la resolución de problemas que se enfrentan en el desarrollo de aplicaciones de una sola página. En este tema, vamos a aprender sobre las directivas de AngularJS.

AngularJS no es más que extiende el HTML existente; Se agrega en la página HTML con etiqueta. AngularJS hace que el sitio HTML responda mejor a las acciones del usuario al agregar atributos adicionales fácilmente. La última versión estable de AngularJS es 1.6.x a partir de ahora.

Directivas de AngularJS

AngularJS es un marco eficiente que admite la arquitectura basada en Modelo-Vista-Controlador (MVC). Proporciona características básicas como enlace de datos bidireccional, controlador, servicios, directivas, plantillas, enrutador, filtros, inyección de dependencia, etc. Todas estas son las características principales que trabajan en colaboración para hacer que AngularJS sea eficiente.

La directiva es una de las características muy útiles en AngularJS. Extiende el HTML existente y permite desarrollar páginas web fácilmente con un nuevo comportamiento utilizando JavaScript central. Permite escribir nuestras propias etiquetas personalizadas y asignarlas al HTML existente. Esta funcionalidad brinda más libertad y permite a los desarrolladores una gran flexibilidad para crear y usar elementos personalizados en aplicaciones web en consecuencia. Además, también pueden diseñar sus propias directivas. En este artículo, nos centraremos principalmente en las directivas de AngularJS e intentaremos obtener conocimiento de esta característica principal.

Las directivas no son más que marcadores en elementos DOM en HTML, como el nombre del atributo, el nombre del elemento, la clase CSS o el comentario. El compilador de AngularJS luego adjunta el comportamiento especificado a ese elemento. Cada directiva tiene un nombre y comienza con 'ng-'. Cada directiva puede decidir dónde se puede usar en elementos DOM. Hay algunas directivas existentes que ya están disponibles en AngularJS y, de manera similar, podemos definirlas por nuestra cuenta.

Echaremos un vistazo a tres directivas integradas principales que dividen el marco AngularJS en tres partes principales.

1. ng-app: esta directiva le dice al compilador que esta es la aplicación AngularJS. La directiva donde se define en DOM se convierte en el elemento raíz de la aplicación. P.ej



AngularJS está disponible como archivo JavaScript y se agrega a HTML usando la etiqueta. La aplicación ng at element le dice a AngularJS que div es el elemento raíz y el propietario de la aplicación AngularJS. La aplicación AngularJS comienza desde ese elemento y lo que sea que sea el código AngularJS, está escrito dentro de él.

2. ng-model: esta directiva vincula el valor de la página web, principalmente del campo de entrada a la variable de aplicación. Básicamente, esta directiva permite enviar datos desde la entrada a la aplicación AngularJS que se puede usar en otro lugar. P.ej

Entrar:

La directiva ng-model vincula el valor de entrada a la variable de aplicación denominada "input". Luego veremos cómo podemos mostrar el mismo valor en la página web en el siguiente ejemplo.

3. ng-bind: esta directiva vincula el valor de la aplicación AngularJS a la página web. es decir, permite reenviar datos desde la aplicación a etiquetas HTML. P.ej

Entrar:

Los datos que capturamos utilizando la directiva "ng-model" en la variable de aplicación "input" están vinculados al elemento de etiqueta

utilizando "ng-bind". Podemos ejecutar esta aplicación ahora y ver cómo AngularJS actualiza dinámicamente el valor ingresado en la página.

Junto con estos, hay algunas otras directivas disponibles en AngularJS que son importantes.

4. ng-repeat: esta directiva repite un elemento HTML y se usa en una matriz de objetos. Esta directiva es muy útil en escenarios como mostrar elementos de tabla en una página web.

5. ng-init: esta directiva se usa para inicializar los valores de la aplicación AngularJS antes de que cargue una página web.

Crear nuevas directivas

podemos crear nuestras propias directivas personalizadas junto con las directivas AngularJS disponibles existentes. Es muy fácil crear nuevas directivas usando solo JavaScript. Las nuevas directivas se crean usando “. directiva ". P.ej



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 es una función AngularJS que crea un módulo. Hemos creado una directiva personalizada llamada directiva personalizada para la cual se escribe la función. Siempre que usemos esta directiva en nuestra página web, esta función se ejecutará. En este caso, es una plantilla de retorno que contiene código HTML.

Al nombrar la directiva, debemos usar la convención de nomenclatura de casos de camello y, al invocarla, debemos usar la convención de nomenclatura separada "-".

Hay cuatro formas por las cuales podemos invocar directivas,

Nombre del elemento

Como se usó en el último ejemplo:

Atributo

Clase

Para invocar la directiva utilizando el nombre de la clase, debemos agregar la propiedad de restricción con el valor 'C' mientras la 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..! "
);
));

Comentario

Para invocar la directiva utilizando el comentario, debemos agregar la propiedad de restricción con el valor 'M' al definirla.

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..! "
);
));

La propiedad replace: true es obligatoria y reemplazará el comentario original con la directiva; de lo contrario, el comentario sería invisible.

Conclusión - Directivas AngularJS

Por lo tanto, la Directiva es una característica muy poderosa disponible en AngularJS. La directiva permite introducir una nueva sintaxis, son como marcadores y nos permite adjuntarles un comportamiento especial. Existen directivas disponibles en AngularJS que son muy útiles, también podemos definir nuestras propias directivas personalizadas y usarlas. Las directivas personalizadas permiten a los desarrolladores una gran flexibilidad y libertad. Las directivas agregan nuevas funcionalidades al HTML existente con características y estilos innovadores.

Artículos recomendados

Esta es una guía de las directivas de AngularJS. Aquí discutimos las tres principales directivas integradas que dividen el marco AngularJS en tres partes principales. También puede echar un vistazo a los siguientes artículos para obtener más información:

  1. Versiones de HTML
  2. Marcos en Java
  3. Arquitectura AngularJS
  4. Estilos de lista HTML

Categoría:

Desarrollo de software