Angular 2.0 ha atestiguado el dominio generalizado de los marcos JavaScript de código abierto y es muy apreciado entre los desarrolladores y las empresas por sus soluciones de alto funcionamiento. Angular 2.0, un marco MVW avanzado del lado del cliente, es muy adoptado hoy en día para el desarrollo de aplicaciones móviles y aplicaciones web.
Bloques principales de Angular 2.0
Los desarrolladores para el desarrollo de aplicaciones de Angular 2.0 usan el mecanografiado como lenguaje principal con soporte de la estandarización ECMAScript 6. El mecanografiado es básicamente un lenguaje de tipo compilado con una capa fuertemente tipada junto con JavaScript. TypeScript permite escribir una clase, una interfaz y declaraciones de módulos al igual que en Java o C #, lo que aumenta el rendimiento de la solución web y móvil, ya que el código escrito en Typecript está menos inclinado a errores en tiempo de ejecución. A continuación se menciona para los 8 bloques principales de la arquitectura Angular 2.0:
1. Módulo: el módulo es muy similar a una clase. Un módulo puede describirse mediante un bloque de código que se utiliza para realizar una tarea única en particular. Angular 2.0 tiene una característica de modularidad, donde se construye una sola aplicación separándola en muchos módulos. La declaración de exportación se utiliza para exportar la clase de componente desde un módulo.
clase de exportación AppComponent {}
2. Componente: la vista de la aplicación y la lógica en la página y en la ejecución del clic depende del componente, ya que es una parte central del código y pertenece a la clase de controlador. @Component se usa para registrar un componente y solo se usa un componente por elemento DOM. Además, los estilos CSS se pueden conectar con un componente utilizando estilos en línea, URL de estilo y estilos en línea de plantilla.
3. Plantilla: la plantilla es la parte principal que justifica el aspecto del componente. Se puede decir que la vista del componente se define usando la plantilla. Para mostrar el valor, agregue la expresión de plantilla en el código.
Tu nombre es: {{name}}
4. Metadatos : los metadatos se utilizan principalmente para ampliar la funcionalidad de la clase. En Typecript, para este propósito se define mediante la clase decorate. Por ejemplo, para definir cualquier componente en la aplicación Angular, use metadatos de la clase (es decir, decorador @Component).
5. Enlace de datos : la característica más poderosa, Enlace de datos, es el puente de conexión entre Modelo y Vista. Se sincroniza automáticamente. Angular 2.0 admite cuatro tipos de enlace: enlace de propiedades, enlace de eventos, interpolación y enlace bidireccional.
6. Directiva : las directivas son atributos HTML personalizados que se utilizan para prolongar el poder del HTML. Para crear una directiva, el decorador @Directive se aplica a los metadatos conectados de la clase. Tres tipos de directivas: decorador, componente y plantilla.
7. Servicios : los servicios se usan cuando una sola funcionalidad se usa comúnmente en varios módulos de la aplicación. Básicamente, se utiliza para compartir los datos y el comportamiento dentro de la aplicación. El servicio no tiene clase base. Los servicios de uso común son el servicio de registro, el servicio de datos, el servicio de mensajes, etc.
8. Inyección de dependencias : para adjuntar la funcionalidad de los componentes en tiempo de ejecución, se utiliza la inyección de dependencias. A medida que los objetos se pasan como dependencias, hace que las dependencias sean configurables, eliminando sus dependencias codificadas. Con la inyección de dependencia, los componentes pueden ser fácilmente mantenibles, reutilizables y comprobables.
AngularJS (comúnmente conocido como ” Angular ” o ” Angular.js “) es un completo marco de aplicación web front-end de código abierto basado en JavaScript mantenido principalmente por Google y por una comunidad de individuos y corporaciones para abordar muchos de los desafíos encontrados en el desarrollo de aplicaciones de una sola página. Los componentes de JavaScript complementan PhoneGap, el marco utilizado para desarrollar aplicaciones móviles multiplataforma. Su objetivo es simplificar tanto el desarrollo como la prueba de tales aplicaciones al proporcionar un marco para las arquitecturas modelo-vista-controlador (MVC) y modelo-vista-vista (MVVM) del lado del cliente, junto con componentes comúnmente utilizados en aplicaciones de Internet enriquecidas.
El marco AngularJS funciona leyendo primero la página HTML, que ha incorporado atributos de etiqueta personalizados adicionales. Angular interpreta esos atributos como directivas para vincular partes de entrada o salida de la página a un modelo representado por variables JavaScript estándar. Los valores de esas variables de JavaScript pueden establecerse manualmente dentro del código o recuperarse de recursos JSON estáticos o dinámicos.
De acuerdo con el servicio de análisis de JavaScript Libscore, AngularJS se utiliza en los sitios web de Wolfram Alpha, NBC, Walgreens, Intel, Sprint, ABC News y aproximadamente 8.400 sitios de un millón probado en julio de 2015.
[4]
AngularJS es la parte frontend de la pila MEAN, que consta de la base de datos M ongoDB, el marco del servidor de aplicaciones web E xpress.js, el propio A ngular.js y el entorno de tiempo de ejecución N ode.js.
Fuente: AngularJS
Angular 2 es un marco de front-end de código abierto y fue escrito en mecanografiado y fue desarrollado por desarrolladores de google.
Las siguientes son las características clave de Angular 2:
Componentes : la versión anterior de Angular tenía un enfoque de Controladores, pero ahora ha cambiado el enfoque a tener componentes sobre los controladores. Los componentes ayudan a construir las aplicaciones en muchos módulos. Esto ayuda a mantener mejor la aplicación durante un período de tiempo.
TypeScript : la versión más reciente de Angular se basa en TypeScript. Este es un superconjunto de JavaScript y es mantenido por Microsoft.
Servicios : los servicios son un conjunto de códigos que pueden compartir diferentes componentes de una aplicación. Entonces, por ejemplo, si tuviera un componente de datos que recogiera datos de una base de datos, podría tenerlo como un servicio compartido que podría usarse en múltiples aplicaciones.
Además, Angular 2 tiene mejores capacidades de manejo de eventos, plantillas potentes y mejor soporte para dispositivos móviles.
La estructura Angular 2 le brinda la oportunidad de completar las cosas rápidamente al proporcionar un modelo de avance que produce una utilidad poco común. Este curso lo familiariza con Angular 2, la segunda versión de la estructura JavaScript “superheroica”. Actualizado a partir de la primera etapa de Google, Angular 2 ofrece aspectos destacados propulsados para crear aplicaciones de una sola página: formatos explicativos, información oficial bidireccional, soporte de TypeScript e infusión de confianza. Rakish 2 ahora ofrece segmentos, en lugar de los controladores de la fábrica de ingeniería MVC. La actualización es razonable tanto para diseñadores portátiles como web. Angular Js Online Training Bangalore
Angular es un marco para crear aplicaciones cliente en HTML y JavaScript o en un lenguaje como TypeScript que se compila en JavaScript.
Angular combina plantillas declarativas, inyección de dependencia, herramientas de extremo a extremo y mejores prácticas integradas para resolver desafíos de desarrollo. Angular permite a los desarrolladores crear aplicaciones que viven en la web, los dispositivos móviles o el escritorio.
Angular 2 está basado en componentes. Los componentes combinan conceptos con los que ya estamos familiarizados desde AngularJS. El componente Angular 2 combina la directiva, el controlador y el alcance de AngularJS. Mi artículo intentará hacerte sentir más cómodo con los componentes comparándolos con lo que ya sabes de AngularJS.
Aquí hay algunos tutoriales en los que trabajé para preparar esto. Periódicamente me vincularé a ejemplos de código de ellos: Inicio rápido y Tour de héroes
Se recomienda TypeScript para Angular 2. Verá la extensión de archivo .ts . Señalaré la sintaxis de TypeScript donde sea necesario.
Bootstrapping el componente de nivel superior
Aquí hay un ejemplo de un componente de Angular 2, app.component.ts , que he copiado a continuación del Tutorial de Angular 2.
importar {Component, OnInit} desde ‘@ angular / core’;
importar {Hero} desde ‘./hero’; importar {HeroDetailComponent} desde ‘./hero-detail.component’; importar {HeroService} desde ‘./hero.service’;
Antes de profundizar en los detalles, permítanme describir lo que está sucediendo aquí a un alto nivel. Primero importamos cualquier clase referenciada usando módulos TypeScript en la parte superior. Luego configuramos el componente usando el decorador @Component. El decorador es una característica de TypeScript. Finalmente, definimos las propiedades y el comportamiento del componente y luego lo exportamos.
Las aplicaciones de Angular 2 tendrán un componente principal de nivel superior. Usando el sistema de módulos ES6 (compatible con TypeScript), podemos iniciar la aplicación importando el componente de aplicación y arrancándolo como el componente principal de esta manera:
// main.ts importar {bootstrap} desde ‘angular2 / platform / browser’; importar {AppComponent} desde ‘./app.component’;
bootstrap (componente de la aplicación);
Al cargar main.js en una etiqueta se iniciará la aplicación en la página a través de su componente de nivel superior.
El decorador @Component
Los decoradores de TypeScript, como @Component , son funciones que modifican la clase definida a continuación. El decorador Angular 2 @Component es una configuración muy similar a la Directiva AngularJS. Compare la siguiente Directiva AngularJS con el decorador Angular 2 @Component anterior.
Los componentes y las directivas definen el marcado HTML a utilizar. Los componentes también definen el atributo de estilos donde las directivas no. En componentes, los estilos están encapsulados. No se “filtran” a elementos en el HTML externo ni a otros Componentes. Esto está habilitado por algunas mejoras en el propio HTML.
Los estilos y el marcado HTML no necesitan definirse en línea. @Component proporciona las propiedades templateUrl y styleUrl , todas alternativas a template y style .
Los componentes de Angular 2 toman algunas decisiones por usted que las directivas no tomaron. Por ejemplo, componentes Angular 2:
Aísle siempre el alcance (en lugar de compartir un alcance primario)
Siempre restringir 'E' (cargar en elementos personalizados en el DOM)
Siempre enlace a un controlador (en oposición a $ scope)
Las aplicaciones de AngularJS que se adhieren a la Guía de estilo John Papa ya usan estas convenciones. Recomiendo hacer referencia a la guía mientras desarrolla sus aplicaciones AngularJS.
Componente Clase Definición
Las definiciones de clase de componente de Angular 2 hacen el mismo trabajo que nuestros controladores AngularJS. En la parte inferior de app.component.tsexport la definición de clase de componente AppComponent . Es donde definimos e inicializamos el estado de nuestro componente y definimos el comportamiento del componente como funciones a las que se unen los eventos en la página.
import {Component, OnInit} desde 'angular2 / core'; importar {Hero} desde './hero'; importar {HeroDetailComponent} desde './hero-detail.component'; importar {HeroService} desde './hero.service';
Angular 2 proporciona el ngOnInit ciclo de vida ngOnInit para que pueda intervenir e inicializar el componente. Inicializamos datos a través del gancho ngOnInit lugar de a través del constructor para limitar los efectos secundarios en nuestras pruebas. Tenga en cuenta que solo usamos la función de constructor para conectar las cosas.
Interacciones de componentes
AppComponent se representará en , configurando su propio selector de elementos en my-app en el decorador @Component . También representará un HeroDetailComponent en . Hace algunas cosas para que esto suceda:
Importa la clase HeroDetailComponent
Registra HeroDetailComponent en su matriz de metadatos de directives
Proporciona el elemento en su marcado de plantilla
Establece los valores de las propiedades de entrada de HeroDetailComponent través de los atributos del elemento
Aquí está la implementación de HeroDetailComponent :
importar {Componente, Entrada} desde '@ angular / core'; importar {Hero} desde './hero';
Cuando la aplicación se AppComponent , AppComponent se dirige a través de su propiedad de selector para buscar un elemento en la página para representarse. Su subcomponente, HeroDetailComponent , buscará de manera similar un elemento través de su propiedad de selector .
El elemento se proporciona en el marcado del componente principal de AppComponent , AppComponent , y el elemento se proporciona en index.html . Los usuarios del enrutador ui angular reconocerán este patrón de representación de vistas anidadas en elementos .
Cuando el usuario selecciona un héroe, AppComponent es responsable de pasar esa información al HeroDetailComponent .
En el elemento , AppComponent enlaza la propiedad de héroe de HeroDetailComponent con el valor actual de su propiedad de Hero selectedHero . También declaramos héroe como una propiedad de HeroDetailComponent Definición de clase de HeroDetailComponent (consulte el código de HeroDetailComponent arriba). El efecto secundario interesante de esto es que el enlace de datos en selectedHero , y el
en la plantilla HeroDetailComponent es el disparador que representa el componente my-hero-detail en la página.
Una propiedad vinculada de esta manera, a través del elemento de un subcomponente, debe declararse como @Input() en el subcomponente. Si no lo hace, forzará a Angular 2 a rechazar el enlace y arrojará un error. En Angular 2, declaramos explícitamente las propiedades @Input() como @Input() , de modo que podamos proteger las propiedades internas de ser manipuladas desde el exterior.
La sintaxis de paréntesis en [hero] representa un enlace de datos de propiedad. Este es un enlace currentHero de currentHero desde el componente a un elemento. Angular 2 agrega una nueva sintaxis de plantilla para representar diferentes enlaces en el marcado.
El enlace unidireccional significa que el valor de currentHero no puede actualizarse con hero-detail . Un enlace bidireccional con currentHero se representaría como [(hero)] = "currentHero" . Este ejemplo no toca todos los tipos de enlace de datos en Angular 2. Aquí puede leer más sobre enlaces de eventos, etc.
Inyección de dependencia
AppComponent depende del HeroService para acceder a los datos de héroe de la aplicación. Registramos HeroService como una dependencia en la @Component de providers del decorador @Component . En nuestra matriz de proveedores, definimos los servicios que nos interesan y están disponibles en el constructor de nuestro componente.
Tenga en cuenta que no declaramos HeroService como una dependencia del componente HeroDetail . No es necesario volver a declarar las dependencias en los subcomponentes, y hacerlo podría ser perjudicial. Redeclarar HeroService de esta manera le daría a HeroDetail una nueva instancia del HeroService . Esto anula el propósito del servicio, que es compartir los mismos datos entre diferentes componentes.
Conclusión
Escribí este artículo para demostrar algunas diferencias en la experiencia de desarrollo entre Angular 2 y AngularJS al observar una nueva característica específica, Componentes. Espero que los componentes le brinden una nueva forma de pensar acerca de sus aplicaciones, haciéndolas simultáneamente más flexibles, extensibles y mantenibles.
Angular 2 introduce muchas otras mejoras, tanto en el código como en áreas como el rendimiento y el soporte móvil. Te invito a explorar y descubrirlos por ti mismo. Feliz Angularing!
Para comenzar con Angular 1.x fue la versión inicial de Angular que se escribió en JavaScript. El marco en sí resolvió muchos problemas complejos, como el enlace de datos bidireccional, la escritura de directivas, etc.
Para la próxima versión importante de Angular, el equipo de Google usó Type Script, que es un súper conjunto de JS de Microsoft y es muy fácil de codificar si un programador ha trabajado en cualquier otro lenguaje basado en OOPS como C #, Java, y eso es cómo Angular 2 entró en escena.
Actualmente, Angular se ha marcado con su último lanzamiento “Angular 5” .
Angular 2 es la próxima versión principal de AngularJS. Es un cambio completo de las versiones anteriores de AngularJS. Si conoce AngularJS, entonces aprender Angular 2 es una experiencia diferente. El lenguaje preferido en Angular 2 es TypeScript, no JavaScript.
Desarrollar aplicaciones en Angular 2 es una experiencia completamente diferente. Tienes que aprender sobre nuevos conceptos como componentes, decoradores, nuevas formas de inyección de dependencia.
También Angular 2 es mejor para desarrollar aplicaciones móviles en comparación con AngularJS.
Hace seis años, Google lanzó AngularJS, un marco de aplicaciones web front-end de código abierto basado en JavaScript que los desarrolladores han comenzado a usar para crear aplicaciones web móviles y de escritorio. Angular tiene incluso un lema: “¡HTML mejorado para aplicaciones web!”, Porque se agrega a una página HTML con una etiqueta
Angular (comúnmente conocido como ” Angular 2+ ” o ” Angular 2 “) es una plataforma de aplicación web front-end de código abierto basada en TypeScript dirigida por el equipo angular de Google.
Comprenda que Angular 2 es completamente diferente de AngularJS.
AngularJS es un marco front-end escrito en javascript, mientras que Angular 2 está escrito en TypeScript.
Bien, entonces Angular2 es de hecho un marco MVW basado en Javascript, cuando lo instale verá una carpeta de módulos de nodo en su directorio de trabajo, todos estos son los módulos dependientes que se basan en JS, y las bibliotecas principales angulares se han escrito en Typecript (que se puede considerar como un superconjunto de javascript), por lo que el mecanografiado se “transpila” a Javascript estándar, por lo que al final del día todo está en archivos .js simples.
Ahora notará una gran cantidad de archivos .ts que son archivos de mecanografía que el compilador de mecanografía se transpila a archivos .js.
AngularJs 2 es un marco de aplicaciones web front-end de código abierto basado en JavaScript mantenido principalmente por Google y por una comunidad de individuos y corporaciones para abordar muchos de los desafíos encontrados en el desarrollo de aplicaciones de una sola página.
Los componentes de JavaScript complementan a Apache Cordova, el marco utilizado para desarrollar aplicaciones móviles multiplataforma.
Su objetivo es simplificar tanto el desarrollo como la prueba de tales aplicaciones al proporcionar un marco para las arquitecturas modelo-vista-controlador (MVC) y modelo-vista-vista (MVVM) del lado del cliente, junto con componentes comúnmente utilizados en aplicaciones de Internet enriquecidas.
Angular 2 es el marco más popular para desarrollar aplicaciones móviles . También es para aplicaciones de escritorio y móviles. Angular 2 es una fase de desarrollo que conoces muy bien y espero que te encante.
Para más
Introducción a Angular 2: los fundamentos de los componentes
Documentación de 5 minutos de inicio rápido Angular 2 con ejemplos de demostración en vivo
