Descripción general de AngularJS
En Brat Tech LLC en 2009, los desarrolladores Misko Hevery y Adam Abrons desarrollaron un marco AngularJS después del cual se produjo una revolución en el desarrollo front-end y la creación de aplicaciones de una sola página. AngularJS es un marco de JavaScript, que une elementos Html con objetos de JavaScript. El enlace de datos y la inyección de dependencias son algunas de las características principales de AngularJs que ahorran tiempo al escribir códigos largos, lo que facilita el trabajo de los desarrolladores y navegadores. Cómo se logra esto se explicará en profundidad, pero por ahora solo recuerda estas terminologías. En este tema, vamos a aprender sobre la versión AngularJS.
Versiones de AngularJS
AngularJS es las versiones de Angular 1.x y luego se desarrolla Angular 2, que es diferente de Angular 1.x. trabajos.
¿Por qué AngularJS Version y cómo funciona?
AngularJS nos ayuda a desarrollar aplicaciones interactivas de una sola página. Por aplicaciones de una sola página, quiero decir que la única página que visitó cargará todos los demás contenidos usando JavaScript. Esta característica ayuda a que la aplicación sea rápida y efectiva.
Cuando usamos javascript y html para compilar aplicaciones, deberá vincular la vista al modelo mediante el uso de funciones y objetos JS. Pero si cree que estos enlaces de datos bidireccionales en una aplicación industrial práctica, el mismo enfoque se vuelve tedioso con códigos largos. Esa es una de las principales razones por las que era necesario aprender y desarrollar AngularJS.
Es hora de aprender algunos conceptos básicos antes de comenzar a desarrollar aplicaciones en las que se basa AngularJS:
- Modelo: el modelo contiene datos, objetos y lógica.
- Vista: es la presentación visual de la aplicación, que también se denomina interfaz de usuario.
- Enlace bidireccional con vista al modelo: el objeto javascript, es decir, el objeto que desea enlazar a un DOM HTML, por ejemplo, un cuadro de texto, entrada o cualquier etiqueta Html y viceversa, se puede hacer fácilmente utilizando algunas bibliotecas AngularJS predefinidas.
- Controladores: los controladores son funciones de JavaScript que conectan el modelo y la vista.
- Servicios: los servicios de AngularJS son funciones de javascript que realizan tareas o funcionalidades específicas que javascript mantiene y prueba. Algunos de los ejemplos de servicios son $ scope, $ http, $ rootScope.
- Expresiones: las expresiones se utilizan para enlazar datos con Html. Esta característica también se conoce como interpolación. Las expresiones se escriben con ((expresión)) llaves. Las expresiones se evalúan y se pueden escribir sin etiquetas html.
- Módulos: los módulos funcionan como un contenedor que contiene diferentes partes de la aplicación angular, como controlador, servicios, directivas, etc.
Directivas y alcance
Centrémonos en algunas de las directivas predefinidas y cómo funcionan realmente. La mayor parte de esta directiva comienza con 'ng' tomado de Angular
1 Alcance
- El alcance define el objeto javascript con el que se puede acceder a los datos desde el Modelo hasta HTML. Alcance funciona como un conector entre los dos.
- Algunos servicios de alcance son $ scope, $ rootScope. '$' define que estos servicios están predefinidos y no se pueden modificar. Recuerde, HTML no distingue entre mayúsculas y minúsculas, pero AngularJS distingue entre mayúsculas y minúsculas, por lo que $ Scope arrojará un error como indefinido.
- Es necesario declararlos en nuestra función de controlador y angular lo inyectará automáticamente.
2. ng-controller
- Esta directiva se utiliza para crear una instancia / objeto del controlador a través del cual HTML DOM se comunicará con la lógica real.
- HTML dice que cualquier etiqueta con un '-' se ignorará al crear DOM HTML.
- Una vez que se crea DOM, el intérprete angular encuentra una directiva ng-controller y crea una instancia del controlador particular que también proporciona un servicio $ scope.
- Puede haber muchos ng-controller en una sola página HTML.
3. ng-app
- Esta directiva actúa como un contenedor que contiene controladores, directivas, filtros, expresiones, etc. Registra o inicia la aplicación o el módulo.
- Solo existe una aplicación ng en su HTML. Bajo una aplicación ng puede haber muchos controladores ng.
Esto crea una instancia de un objeto de aplicación con el servicio $ rootScope.
- Por lo tanto, las variables / funciones $ rootScope son accesibles en una aplicación completa.
4. modelo ng
- ng-model se usa para vincular los datos de html al objeto modelo. Proporciona enlace bidireccional.
5. ng-if
- Para ejecutar sentencias condicionales en etiquetas Html se usa ng-if. Si la condición se vuelve falsa, el DOM no incluye ese div en DOM.
6. ng-bind
- En lugar de usar (()) para la interpolación, también se puede usar ng-bind.
7. ng-disabled
- Según una condición, un elemento en la vista se puede deshabilitar.
8. ng-show
- Si la condición dada para ng-show es verdadera, entonces el elemento particular se muestra en el DOM.
9. ng-hide
- Si la condición dada para ng-hide es verdadera, el elemento particular permanecerá oculto en el DOM.
10. ng-repetir
- Repetirá el div o span particular en Html con la longitud de la matriz o lista proporcionada.
11. ng-click
- Al hacer clic en el evento en el elemento html, realizará la funcionalidad o tarea proporcionada.
Consejo: La mejor manera de aprender cualquier idioma es codificarlo. Entonces veamos nuestro primer código.
Ejemplos de versión AngularJS
Estos son algunos de los ejemplos que figuran a continuación.
First Name:
Last Name:
Your name is: (( fname +" "+ lname))
First Name:
Last Name:
Your name is: (( fname +" "+ lname))
First Name:
Last Name:
Your name is: (( fname +" "+ lname))
First Name:
Last Name:
Your name is: (( fname +" "+ lname))
First Name:
Last Name:
Your name is: (( fname +" "+ lname))
First Name:
Last Name:
Your name is: (( fname +" "+ lname))
First Name:
Last Name:
Your name is: (( fname +" "+ lname))
Salida:
Nombre: Joseph
Apellido: Alex
Tu nombre es: Joseph Alex
Hay algunos puntos para enfocar desde el fragmento de codificación anterior:
- En la línea 3, se agrega un archivo angular.min.js a la página que cargará todas las bibliotecas necesarias para ejecutar la aplicación AngularJS.
- AngularJS tiene principalmente 2 bibliotecas angular.js y una versión comprimida de este archivo como angular.min.js.
- En la línea 5, puede ver la directiva como ng-app que Html ignora al crear Html DOM y AngularJS la toma como una de sus directivas para iniciar la aplicación.
- En la línea 6, 7 se usa ng-model que enlazará el texto que ingresará en el cuadro de texto con las variables fname y lname. Recuerde que estas variables distinguen entre mayúsculas y minúsculas.
- En la línea 8, verá la expresión ((fname + "" + lname)) que angular evaluará y mostrará los datos que ingrese en los cuadros de texto. Esto se conoce como interpolación.
Exploremos con un ejemplo más:
var app = angular.module('CustomerApp', ());
controller('firstController', function($scope)(
$scope.customerName = 'Joe';
$scope.customerAge = '26';
));
Nombre de pila:
Apellido:
El nombre del cliente es ((customerName)) y la edad es ((customerAge))
En este ejemplo, en la línea 5 se crea una aplicación con el nombre CustomerApp que incluirá todas las partes de la aplicación. En la siguiente línea, se crea un controlador y se le asigna el nombre de firstController. $ scope se declara como un parámetro de función. AngularJS lo inyectará automáticamente en la aplicación para uso directo, el desarrollador no tiene que crearlo explícitamente.
Esta característica se conoce como inyección de dependencia. De manera similar, el controlador ng se usa para el mismo controlador bajo la etiqueta ng-app. Recuerde que el alcance de la aplicación o el controlador será donde termina el div o cualquier cosa en la que defina una aplicación o controlador. En este caso, no puede acceder al controlador o la aplicación después de la línea 16.
Artículos recomendados
Esta es una guía de Qué es la versión AngularJS. Aquí discutimos las versiones de AngularJS con directivas, alcance y cómo funciona AngularJS. También puede echar un vistazo a los siguientes artículos para obtener más información:
- Arquitectura AngularJS
- Aplicación angular JS
- Prueba de unidad AngularJS
- Carrera en AngularJS
- ¿Qué es Angular 2?