tutorial ejemplos javascript angular

javascript - ejemplos - angularjs tutorial



¿Qué es Angular 4 y de dónde puedo obtener más información? (7)

Recientemente, alguien me habló de Angular 4, ¿qué es? ¿Cómo es diferente de Angular 2? Estoy aprendiendo Angular 2. Traté de encontrar el sitio web oficial de Angular 4 pero no obtuve el resultado. Tengo mucha curiosidad al respecto.

EDITAR

El sitio web de Angular 4 ya está disponible here .

EDITAR 2

Angular 5 (beta) ya está disponible here.

EDITAR 3

Angular 5 ya está disponible here , los cambios están disponibles here

EDITAR 4

Angular 6 ya está disponible here .

EDITAR 5

Angular 7 ya está disponible.

EDITAR 6

Angular 8 ya está disponible here. .

Para actualizaciones y nuevas características, visite la publicación de blog Angular para la versión 8

Angular 2 es moderno, aprovecha las características proporcionadas en los últimos estándares de JavaScript y algunos más allá, como clases, módulos API y decoradores. Sin embargo, admite navegadores heredados. Angular 2 tiene una API simplificada. Tiene menos directivas integradas para aprender, un enlace más simple.

No están lanzando Angular 3 porque a medida que siguen las versiones semánticas, todas las bibliotecas en el repositorio github de Angular se versionan de la misma manera, es decir, 2.4.9, pero debido a la desalineación de la versión del paquete de enrutador angular, el equipo decidió ir directamente a Angular v4.

Angular 2 no hay ningún camino que rompa los cambios. Pero sí, hay algunas características adicionales que han llegado a hacer angular 4 marco más potente.

  • Reduzca el tamaño del motor de visualización : - Hay un cambio más avanzado en AOT de angular, por lo tanto, mejore el tiempo de compilación. Estos cambios también reducen casi el 60% del tamaño de la aplicación.
  • Introducir nueva tubería : - Angular 4 presenta nueva tubería ''titlecase'' '''' '' así que usando esta tubería puede cambiar la primera capital posterior de cualquier palabra.
  • ngIf y else : - Anteriormente, ''ngIf'' está allí, pero en angular 4 también introducen ''else'', así que ahora puede usar if else block en html DOM.
  • Como palabra clave : - Angular 4 introduce una nueva palabra clave llamada ''As'' para simplificar ''let'' como se definió anteriormente
  • Paquetes de animación : - Paquete de animación separado del núcleo angular. Ahora la animación tiene su propio paquete, es decir, @ angular / platform-browser / animations.
  • Renombrar plantilla : - Ahora la plantilla se convierte en ''ng-template''. Debería usar la etiqueta ng-template en lugar de template.
  • Parámetros de búsqueda : - En angular 4 puede proporcionar parámetros de búsqueda en la solicitud http. Esto se vuelve fácil de usar.
  • Nuevos validadores de formularios : - Angular 2 da muchas validaciones de formularios, pero hay una que se usa más concurrentemente, es decir, el validador de correo electrónico. Así que ahora use el validador de correo electrónico que se introduce en angular

Angular 4 es solo una versión más nueva de Angular que Angular 2.

Angular 2.xx y Angular 4.xx también se denominan Angular , mientras que la versión anterior (1.xx) se denomina AngularJS .
Esta diferencia de nombre indica que existen diferencias importantes, mientras que Angular 4.xx es solo una versión más nueva de Angular que Angular 2.xx.

Angular utiliza versiones semánticas desde Angular 2, lo que requiere que se incremente el número mayor cuando se introdujeron cambios importantes.

El equipo de Angular pospuso las características que causan cambios importantes, que se lanzarán con Angular 4.

La versión angular 3.xx se omitió para poder alinear los números de versión de los módulos principales, porque el enrutador ya tenía la versión 3.

Para ver qué cambios se introducirán en Angular4, consulte here

Consulte también esta publicación de blog http://angularjs.blogspot.co.at/2016/10/versioning-and-releasing-angular.html

Esta es la lista de cambios importantes en angular 4

  1. Saltar angular 3.0 a angular 4.0 para que podamos alinear el núcleo con el enrutador que ya es 3.0
  2. El compilador es más rápido en comparación con el angular 2
  3. Algunos de los errores que están en angular 2 se rectifican en angular 4
  4. Se ha introducido otra cláusula
  5. Render ha sido renombrado a Renderer2 (Razón por la que esto se hizo es porque debajo del capó hubo muchos cambios)

Para más información -> http://www.prathapkudupublog.com/2017/04/important-changes-in-angular-4.html#more

Tomando de este blog , ¡veamos qué hay de nuevo en Angular 4!

En comparación con Angular 2, hay muchas cosas nuevas agregadas a la lista. No solo hay nuevas funciones, sino también algunos ajustes que mejoran las funciones antiguas.

Más rápido y más pequeño

Con Angular 4, las aplicaciones consumirán menos espacio y serán más rápidas que antes. Sin embargo, de ninguna manera han terminado todavía, y el equipo está enfocado en realizar mejoras adicionales en los próximos meses.

Ver motor

Han realizado cambios en el capó del aspecto del código generado por AOT. Estos cambios reducen el tamaño del código generado para los componentes en aproximadamente un 60% en la mayoría de los casos. Cuanto más complejas sean las plantillas, mayores serán los ahorros. Durante el período de lanzamiento del candidato, muchos desarrolladores que migraron a Angular 4 redujeron sus paquetes de producción en cientos de kilobytes.

Paquete de animación

Sacaron animaciones de @ angular / core y las pusieron en su propio paquete. Esto significa que si no usa animaciones, este código adicional no terminará en sus paquetes de producción. Este cambio también le permite encontrar más fácilmente la documentación y aprovechar mejor la finalización automática. Puede agregar animaciones usted mismo a su NgModule principal importando BrowserAnimationsModule desde @ angular / platform-browser / animations.

Nuevas características

* NgIf y * ngFor mejorados

La sintaxis de enlace de plantilla ahora admite un par de cambios útiles. Ahora puede usar una sintaxis de estilo if / else y asignar variables locales, como al desenrollar un observable.

<div *ngIf=”userList | async as users; else loading”> <user-profile *ngFor=”let user of users; count as count” [user]=”user”> </user-profile> <div>{{count}} total users</div> </div> <ng-template #loading>Loading…</ng-template>

Angular Universal

Universal, el proyecto que permite a los desarrolladores ejecutar Angular en un servidor, ahora está actualizado con Angular nuevamente, y esta es la primera versión desde que Universal, originalmente un proyecto impulsado por la comunidad, fue adoptado por el equipo de Angular. Esta versión ahora incluye los resultados del trabajo interno y externo del equipo de Universal en los últimos meses. La mayoría del código universal ahora se encuentra en @angular/platform-server .

Compatibilidad con TypeScript 2.1 y 2.2

El equipo ha actualizado Angular a una versión más reciente de TypeScript. Esto mejorará la velocidad de ngc y obtendrá una mejor verificación de tipos en toda su aplicación.

Mapas de origen para plantillas

Ahora, cuando hay un error causado por algo en una de sus plantillas, generan mapas fuente que dan un contexto significativo en términos de la plantilla original.

La línea de fondo

no sería difícil cambiar a Angular 4. Sin embargo, si todavía no se siente muy cómodo con Angular 2, puede ser un poco difícil para usted. En ese caso, el consejo experto de ValueCoder sería esperar unos meses más y luego tomarlo, ya que aún quedan 6 meses antes de que llegue Angular 5.

¿Qué es Angular 4?

Angular 4 es un marco de desarrollo web de código abierto escrito y mantenido por el equipo angular de Google.

Para abarcar mejor las capacidades de angular, veamos algunos de los puntos importantes sobre angular.

  1. Angular 4 o simplemente Angular es la próxima versión lógica de Angular2, pero no tiene nada en común con Angular 1, también llamada AngularJS

  2. Angular está escrito en TypeScript y, por lo tanto, viene con todas las capacidades que ofrece typecript

  3. Angular también se utiliza en el marco de desarrollo móvil multiplataforma llamado IONIC, por lo que no se limita solo a aplicaciones web

Para seguir actualizando Angular, la comunidad angular ha anunciado lanzamientos angulares cada 6 meses.

Aquí está la fuente de esta respuesta y un tutorial para principiantes sobre Angular 4 ::

Angular 4 Tutorial

1) ¿Qué hay de nuevo?

1.1 Más pequeño y más rápido

1.2 Paquete de animación

Extrajo animaciones de @ angular / core y las introdujo en su propio paquete. Esto significa que si no usa animaciones, este código adicional no terminará en sus paquetes de producción.

2) Nuevas características

2.0) Ver motor

El nuevo motor de vista mejora significativamente el paso de compilación que da como resultado un tamaño de aplicación más pequeño en comparación con las iteraciones anteriores.

2.1 Mejorado * ngIf y * ngFor Ahora puede usar una sintaxis de estilo if / else y asignar variables locales, como al desenrollar un observable.

<div *ngIf="userList | async as users; else loading"> <user-profile *ngFor="let user of users; count as count" [user]="user"> </user-profile> <div>{{count}} total users</div> </div> <ng-template #loading>Loading...</ng-template>

2.2 Universal angular

2.3 Compatibilidad con TypeScript 2.1 y 2.2

2.4 Mapas de origen para plantillas

Ahora, cuando hay un error causado por algo en una de sus plantillas, genera mapas de origen que dan un contexto significativo en términos de la plantilla original.

3) Cambios de embalaje

3.1 Módulos Flat ES (Flat ESM / FESM)

Este formato debería ayudar a sacudir los árboles, ayudar a reducir el tamaño de los paquetes generados y acelerar la compilación, la transpilación y la carga en el navegador en ciertos escenarios.

3.2 Construcciones experimentales de ES2015

Esta opción es experimental y opcional. Los desarrolladores han reportado ahorros de hasta un 7% en el tamaño del paquete al combinar estos paquetes con Rollup.

3.3 Compatibilidad de cierre experimental

haciendo posible aprovechar las optimizaciones de cierre avanzadas, lo que resulta en tamaños de paquete más pequeños y una mejor sacudida del árbol.

Obtuve esta información de este blog ...... para obtener más información, consulte aquí