Menú

Directiva AngularJS con nuestro primer ejemplo de AngularJS

  • Principal
  • Otro
  • Directiva AngularJS con nuestro primer ejemplo de AngularJS

angularjs directive with our first angularjs example

Pruebe Nuestro Instrumento Para Eliminar Los Problemas

Directiva AngularJS con el primer ejemplo de AngularJS:

Teniamos breve introducción a AngularJS en nuestro tutorial anterior. Este tutorial le explicará los hechos importantes que necesita saber sobre AngularJS.

AngularJS es un marco de aplicación web de código abierto basado en JavaScript.

Lo mantiene Google Corporation y una gran comunidad. AngularJS es una respuesta a los diversos inconvenientes que se encuentran al formular aplicaciones de una sola página.

Lea nuestro Toda la serie AngularJS para conocer en profundidad el concepto de AngularJS.

mejor software de ajuste de pc 2019

Directiva AngularJS y ejemplo

El marco de la aplicación AngularJS actúa como una plantilla y puede reducir los desafíos que se enfrentan durante el desarrollo de aplicaciones web.

Lo que vas a aprender:

Descripción general de AngularJS

AngularJS fue lanzado por Google el 20thOctubre de 2010, y hoy se ha convertido en un marco importante para varias aplicaciones de interfaz de una sola página.

Esa es la razón por la que AngularJS se ha mantenido firme a pesar del desarrollo tecnológico a un ritmo vertiginoso. El sistema basado en interfaz multiplataforma también lo hace más eficiente.

AngularJS complementa y beneficia a Apache Cordova, que es un marco que se utiliza para aplicaciones móviles multiplataforma. Tiene la visión de mejorar la experiencia y simplificar las pruebas y el desarrollo de aplicaciones web y proporciona un marco sólido para el desarrollo de su aplicación AngularJS.

¿Por qué usar AngularJS?

A continuación se enumeran las diversas características y razones por las que AngularJS debe usarse en el desarrollo de aplicaciones web.

  1. El enlace de datos: La plataforma proporciona sincronización automática de datos entre el modelo y el contenido de la vista y, como resultado, le ahorra tiempo y esfuerzo en gran medida.
  2. Controlador: Estos son JavaScript que están vinculados a un ámbito particular.
  3. Servicios: AngularJS tiene muchos servicios integrados. P.ej $https
  4. Filtros: Esto ayuda a seleccionar un subconjunto de elementos de una matriz y lo devuelve a una nueva matriz.
  5. Directivas: Son marcadores en elementos DOM como atributos, elementos CSS, etc. Se pueden utilizar como etiquetas personalizadas de HTML.
  6. Enrutamiento: Ayuda a crear aplicaciones de una sola página. Se especifica en la URL después del signo # y le permite crear diferentes URL para diferentes contenidos en su aplicación.
  7. MVC: Significa Modelo, Vista y Controlador. Es un patrón de diseño y se utiliza para la división de una aplicación en diferentes partes, es decir, modelo, vista y controlador.
  8. Vinculación profunda: Esta característica del marco de la aplicación le ayuda a codificar el estado de la aplicación en la URL para marcar. Posteriormente, la aplicación también se puede restaurar desde la URL en el mismo estado.
  9. Inyección de dependencia: AngularJS también tiene un subsistema de inyección de dependencia incorporado que puede ser útil para que el desarrollador haga que el proceso de desarrollo y prueba sea más fácil, coherente y sencillo.
  10. Alcance: Estos son los objetos que actúan como pegamento entre el controlador y la vista.

¿Cómo usar AngularJS?

Personalmente, creo que difícilmente hay un marco de desarrollo de aplicaciones web front-end mejor disponible en el mercado hoy en día que AngularJS.

Los tutoriales sobre cómo usar AngularJS no son frustrantemente complejos y, de hecho, también los encontré bastante fáciles de seguir. Puede aprovechar un sistema de enlace bidireccional, facilidades de creación de plantillas, modularización, sistema de inyección de dependencia, función de manejo AJAX y las otras características de este marco también.

Antes de iniciar la codificación, debe conocer el concepto MVC (Modelo, Vista y Controlador), el script 'Hello World' y las diversas características de AngularJS.

AngularJS Directives

AngularJS le proporciona una gran cantidad de directivas que le permiten asociar los distintos elementos HTML con los datos de la aplicación. Son los atributos básicos que comienzan con la palabra clave ng- .

La directiva más importante que debe incluir en cualquier página mientras usa AngularJS se proporciona a continuación.

|_+_|

Es el punto de partida de la aplicación AngularJS y debe agregarse a cualquier elemento que envuelva el resto de la página, como el elemento de la parte del cuerpo. AngularJS busca este aspecto cada vez que se carga la página y tiende a evaluar todas las directivas del código automáticamente.

Las directivas de AngularJS incluyen:

# 1) ng-aplicación :Esto se usa para iniciar la aplicación AngularJS. Cuando se carga la página web que contiene la aplicación AngularJS, automáticamente inicia la aplicación definiendo el elemento raíz. Solo se debe usar una directiva ng-app en su código HTML.

Sin embargo, si se encuentran más de una directiva ng-app en el código HTML, se utilizará la primera apariencia.

Sintaxis:

|_+_|

# 2) de calor :Esto se usa para inicializar la aplicación.

Proporciona un conjunto de valores que deben asociarse con variables para la inicialización. Esta directiva no se usa a menudo ya que la inicialización de variables generalmente ocurre a través de funciones específicas dentro del proyecto.

Sintaxis:

|_+_|

# 3) ng-controller: Se utiliza cuando la inicialización de variables debe realizarse en función de una función; es decir, cada una de las variables debe inicializarse basándose en la lógica de la función. AngularJS invoca la función especificada en la directiva ng-controller con un objeto.

Sintaxis:

|_+_|

# 4) modelo ng :Esto se usa para vincular los valores de AngularJS a los controles proporcionados por la aplicación. Para ser específicos, los datos obtenidos por la entrada a través del controlador y el modelo estarán vinculados a la vista (w.r.t. modelo MVC) que se presentará al usuario.

Sintaxis:

|_+_|

ng-show y ng-hide: Estos comandos ocultan y muestran los elementos, lo que se logra configurando el estilo de visualización CSS.

AngularJS también le permite definir directivas personalizadas. Se utilizan para ampliar la funcionalidad de HTML y se definen mediante la función 'directiva'. Simplemente reemplazan el elemento para el que están activados.

La Cheat Sheet de AngularJS fue un salvavidas para mí. Hay una serie de otras pautas que puede consultar en la hoja de referencia. Incluso puede aprender a crear directivas personalizadas mediante el uso de AngularJS. Encontré todas las instrucciones y directivas de la plataforma AngularJS en la hoja de trucos para simplificar muchos problemas.

Ejemplo de AngularJS

Un ejemplo simple de AngularJS se puede escribir de la siguiente manera:

Necesita crear un archivo HTML, Por ejemplo , angularjsexample.html Como se muestra abajo.

|_+_|

En el ejemplo anterior, el script presenta AngularJS JavaScript.

Le sorprendería saber cuántas aplicaciones que usa a diario se han desarrollado en la plataforma AngularJS.

A continuación se muestran algunos nombres:

  • El guardián
  • PayPal
  • jetBlue
  • Lego
  • Upwork
  • Netflix
  • Persona de libre dedicación
  • iStock

Es evidente a partir de los nombres anteriores la altura que puede alcanzar al aprender a utilizar este marco. Estos sitios están en la cima de su juego, y una gran parte de su éxito definitivamente se debe a la eficiencia de los sitios solo porque se han desarrollado en AngularJS.

Conclusión

Si está buscando crear y desarrollar aplicaciones de una sola página para dispositivos móviles o incluso sitios web, como lo era antes, no busque más.

AngularJS es una ventanilla única para usted, ya que este sitio ayuda y hace que el desarrollo de aplicaciones sea mucho más cómodo y cohesivo. No solo es excelente para principiantes, sino que a medida que profundiza en él, tenderá a aprender con la experiencia y a desarrollar excelentes aplicaciones.

Mientras tanto, en caso de que actualice a versiones más recientes, no es necesario que haga muchos esfuerzos. Con solo aprender algunos comandos nuevos y comprender los nuevos ajustes, también puede comenzar a desarrollar aplicaciones en las nuevas versiones.

Mire nuestro próximo tutorial para saber más sobre el desarrollo de aplicaciones web de una sola página usando AngularJS.

PREV Tutorial | SIGUIENTE Tutorial

Lectura recomendada

^