¿Cuál es AngularJS?
AngularJS es un potente y estructural marco de JavaScript lo que es más fácil de implementar en las aplicaciones web individuales y permite la organización de grandes, cliente aplicaciones pesadas en algo manejable. Es un marco de aplicación web de código abierto, libre y utilizado por miles de desarrolladores de todo el mundo.
AngularJS se basa en la MVC (Modelo de Control de vista) patrón que se pretende construir aplicaciones web ricas de Internet y simplificar tanto el desarrollo y prueba de aplicaciones mediante el uso de la arquitectura MVC y separa sus aplicaciones ricas de Internet en los modelos, vistas y controladores. AngularJS crea aplicaciones de una sola página, lo que significa que el navegador va a cargar una sola página, independientemente del tamaño de su solicitud.
AngularJS fue desarrollado por Miskohevery y Adam Abron,mantenido por google; utilizado internamente por ellos y el MIT. Está disponible bajo la licencia Apache versión 2.0. Fue lanzado inicialmente en 2009 y la versión estable actual es 1.3.5 (decemeber 1, 2014).
AngularJS: En esta sección, vamos a resumir los conceptos básicos de AngularJS.
- Es una biblioteca escrita en JavaScript
- No es una plataforma o lenguaje
- No es un plug-in o ampliación
- Se extiende HTML, CSS y JavaScript
- no es una biblioteca de manipulación de DOM como jQuery
- No requiere jQuery o herencia
- No requiere de una vía de enlace de datos y código repetitivo
¿Por AngularJS?
- Se basa en el patrón de diseño MVC, que ofrece numerosas maneras de construir aplicaciones web del lado del cliente.
- Ayuda a construir aplicaciones del lado del cliente con menos código y más flexibilidad.
- Se extiende HTML utilizando la funcionalidad de las directivas, atributos, expresiones y plantillas para HTML.
- AngularJS es una arquitectura MVC lo que simplifica el desarrollo y prueba de aplicaciones fácilmente por el lado del cliente.
- Es bueno para el desarrollo de aplicaciones de una sola página y los extremos delanteros para aplicaciones basadas en web.
- Tiene marco flexible y características versátiles. Por lo que se utiliza tanto para grandes proyectos de aplicaciones y pequeñas aplicaciones pequeñas.
Features:
AngularJS (marco basado en JavaScript) crea aplicaciones de forma más rápida mediante el uso de varias características, tales como:
- Se trata de una tecnología del lado del cliente que proporciona cosas poderosas para crear aplicaciones web dinámicas.
- Es un marco basado en MVC, permite a los usuarios crear una arquitectura adecuada y aplicaciones web mantenibles.
- Es un marco de aplicación web de código abierto utilizado por miles de desarrolladores de todo el mundo.
- Se permite el uso de componentes reutilizables y la reutilización de código.
- Se hace que la creación de interfaz de usuario (IU) fácil a través de proceso de enlace de datos.
- HTML enfoque declarativo.
- Ayuda a dividir su solicitud en partes más pequeñas.
Diagrama de arquitectura y componentes: Vamos a echar un vistazo al diagrama de la arquitectura del marco AngularJS y sus componentes.
Figure: AngularJS Arquitectura
AngularJS contiene módulos que actúan como un contenedor para diferentes tipos de aplicaciones tales como controladores, puntos de vista, directivas, fábrica, etc.. Módulo especifica cómo una aplicación debe bootstrap. El uso de módulos, los procesos serán más fáciles de entender; se puede reutilizar el código, pruebas de extremo a extremo utiliza módulos para anular la configuración, etc.. Es el lugar para la creación, el registro y la recuperación de los módulos angulares.
config componente sólo acepta proveedores de módulos, significa todos los servicios, fábrica etc, son ejemplos de proveedor. Proporciona todos estos casos a las rutas.
La rutas se utilizan para enlazar los URL de los controladores y puntos de vista.
La Puntos de vista se utilizan para agregar manejo que permite de eventos de usuario. Usa ng-vistaDirectiva que complementa el servicio de ruta por la plantilla de la ruta actual a la disposición principal (index.html) expediente.
La controlador controla los datos de aplicaciones AngularJS que son objetos regulares de JavaScript. AngularJS define ng-controladordirectiva que crea nuevos objetos del controlador usando la función de controlador. Y nuevo niño está disponible para la función de controlador como $alcancecomo se muestra en el diagrama.
La puntos de vista envía elemento o atributo a la directivas que narra compilador de HTML de AngularJS adjuntar un comportamiento específico al elemento DOM y sus hijos.
La fábrica se utiliza para definir el servicio AngularJS y se llama cuando un servicio necesita ser instanciado.
Introducción a AngularJS:
AngularJS es fácil para empezar. Proporciona funciones como dos datos de manera vinculante que hace etiquetas personalizadas, atributos que encapsular directivas incorporadas que hacen que la funcionalidad que se extiende de HTML más fácil.
- Se distribuye archivo JavaScript y se puede utilizar en una página web mediante la inclusión de biblioteca AngularJS como se muestra a continuación:
[código]
<script src=”http:// AngularJS ajax.googleapis.com/ajax/libs/~~number=plural /1.2.26/ angular.min.js”>
</script>
[/código]
También puede comprobar la versión más reciente de AngularJS en su sitio oficial.
- Se pueden crear aplicaciones AngularJS como se muestra a continuación:
[código]
<htmlng-app></html>
Or
<html ng-app = "MyApp"></html>
Or
<divng-app></div>
Or
<div ng-app = "MyApp"></div>
[/código]
La ng-app atributo es el elemento raíz de la aplicación AngularJS.
- Controller se puede definir como se muestra a continuación:
[código]
<div ng-app = "" ng-controller = "myController">
<input type = "text" ng-modelo = "mensaje">
</div>
[/código]
La ng-controladorDirectiva define el controlador de aplicación. La ng-modeloDirectiva se une el valor de los controles HTML, como campos de entrada, seleccione etc para los datos de aplicación.
- Implementar el controlador mediante el uso de $alcance oponerse según lo escrito a continuación:
[código]
functionMyController($alcance){
$scope.message = "Introduzca su nombre";
}
[/código]
La $alcance objeto hace referencia al modelo de aplicación que invoca el controlador que crea mensaje propiedad en el ámbito.
Conceptos básicos:En esta sección vamos a tener una discusión detallada sobre los componentes básicos y los conceptos detrás de ellas.
- módulos
- Directivas
- Alcance
- controladores
- expresiones
- Plantillas
- enrutamiento
- filtros
módulos:
Los módulos proporcionan excelente mecanismo para dividir la aplicación en pequeños componentes reutilizables y especifican cómo una aplicación debe bootstrap. Módulos especifican cómo se definen los componentes de la aplicación y hace que la aplicación sea más legible. Cada módulo se identifica por un nombre único.
Directivas:
Las directivas son bloques de construcción básicos de AngularJS que se utilizan para crear etiquetas HTML personalizados y se pueden colocar en los nombres de elementos, atributos y comentarios. Directivas se pueden usar como directrices HTML que construyen los widgets complejos con funcionalidad capas.
Alcance:
Ámbito de aplicación es un objeto que se une una vista al controlador. En la estructura MVC, se refiere a la aplicación del modelo. Scopes pueden ver las expresiones y propagar eventos a medida que se disponen en la estructura jerárquica.
controladores:
Los controladores son objetos JavaScript que define el comportamiento real de su aplicación. Es responsable de la creación del modelo y funciones mediante el uso de $alcance objeto. El controlador no almacena estado y no interactúa con los servicios remotos.
expresiones:
Las expresiones se escriben dentro de llaves "{{ }}"Representan definiciones que los referentes a nuestro modelo de aplicación. Expresiones no son compatibles con los estados de flujo de control. AngularJS dará salida a los datos de los que se utilizan.
Plantillas:
De modelos se limita pasada de llanura en HTML que no incluya ningún archivo de plantillas específicas angulares. Viene con un conjunto de plantillas en vivo para crear controladores, etc. mediante el uso de un motor de plantillas. Las plantillas se utilizan para mostrar la información del modelo y el controlador.
enrutamiento:
Se utiliza para enlazar los URL de al controlador y vistas. Enrutamiento es atendido por proveedores de servicios de llamadas $operador de ruta para manejar el enrutamiento que es el proveedor de la $ruta Servicio. En otras palabras, es la carga de plantillas sub dependiendo de la dirección URL de la página.
filtros:
Los filtros se utilizan con expresiones para transformar o modificar los datos de los modelos. Podemos agregar expresiones o directivas que utilizan carácter de canalización. AngularJS tiene algunos de los filtros más utilizados, como:
- moneda: convierte el número de formato de moneda.
- mayúscula: convierte las cadenas a mayúsculas.
- minúsculas: convierte las cadenas a minúsculas.
- filtrar: selecciona subconjunto de elementos de matriz.
- orderBy: órdenes matriz por la expresión como ordenados alfabéticamente para cuerdas y numérica de los números.
Ejemplo:
Vamos a crear un ejemplo simple que utiliza la biblioteca AngularJS y crear un archivo HTML como FirstExample.html Como se muestra abajo:
Listing1: aplicación AngularJS simples
[código]
<!DOCTYPE html>
<html>
<head>
<script src= “http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js”></script>
</head>
<body>
<div ng-app =”” ng-controller =”myController”>
Ingrese su nombre: <input type =”texto” ng-modelo =”nomUsuario”><br>
<br>
Nombre completo: {{nomUsuario}}
</div>
<script>
functionMyController($alcance) {
$scope.userName = “David”;
}
</script>
</body>
</html>
[/código]
Como se discutio, hemos incluido AngularJS archivo JavaScript en la página HTML que se define en el <head> tag. La siguiente parte contiene AngularJS aplicación que se define mediante el ng-app atributo se ejecuta dentro de la <div> tag.
La ng-controlador Directiva define el controlador de aplicación. Los AngularJS invocarán el "myController” con $alcance objeto que crea propiedad llamada "nombre de usuario” en la mira.
Definir el nombre del modelo usando ng-modeloDirectiva definido en el <entrada> tag. Se une el campo de entrada a la propiedad del controlador "nombre de usuario”.
Abre el FirstExample.html en el navegador y ver el resultado como se muestra en la siguiente captura de pantalla:
Figure: Ejemplo AngularJS
Conclusión: Ya hemos discutido todos los aspectos de AnguarJS. Antes de concluir, vamos a resumir los puntos. AngularJS (también conocido como Angular)es un marco de aplicación web de código abierto. Proporciona lado del cliente arquitectura MVC junto con componentes utilizados habitualmente requeridas para aplicaciones ricas de Internet. AngularJS sigue el modelo de programación declarativa para la construcción de interfaces de usuario. El objetivo principal de este marco es hacer más fácil el desarrollo y pruebas.
Espero que hayan conseguido una clara comprensión del marco AngularJS. Disfrutar de la lectura en www.techalpine.com
