Meses atrás, decidí estudiar Angular. Cuando estaba avanzando y creando alguna aplicación usándola, me doy cuenta de que Angular 2 está en la vista previa del desarrollador, por lo que es cuestión de tiempo antes de que se lance. Debido a que Angular 2 no será compatible con Angular 1, y hay muchos cambios, la pregunta es, ¿es mejor continuar desarrollando con Angular 1.xo comenzar a desarrollar Angular 2?

Es un hecho que no siempre tenemos que usar la última versión ni el idioma más nuevo del mercado, pero en este caso, la aplicación sigue siendo pequeña, por lo que podría cambiar sin problemas.

Permítanme comenzar diciendo que estoy asumiendo que usted y todos los que leerán esto ya están cómodos con Angular 1 ( ahora denominado AngularJS , en lugar de simplemente Angular para las versiones más nuevas). Dicho esto, entremos en algunas de las adiciones y diferencias clave en Angular 2+.

1. Agregaron un angular cli.

Puede comenzar un nuevo proyecto ejecutando ng new [app name]. Puede servir su proyecto ejecutando ng serve más información aquí: https://github.com/angular/angular-cli

2. Su código angular está escrito en ES6 Typecript y se compila en tiempo de ejecución a Javascript en el navegador.

Para obtener una comprensión completa de esto, le recomiendo revisar algunos de la lista de recursos que tengo al final de mi respuesta.

3. Estructura del proyecto

En una estructura básica, tendrá una app/tscarpeta donde hará la mayor parte de su trabajo y app/jsencontrará app/jsuna .js.mapextensión en los archivos de la carpeta . Ellos "asignan" sus archivos ".ts" a su navegador para su depuración ya que su navegador no puede leer el mecanografiado nativo.

Actualización : está fuera de beta. La estructura del proyecto cambió un poco, en la mayoría de los casos y si está utilizando el cli angular, estará trabajando en la src/app/carpeta. En un proyecto inicial, tendrá lo siguiente.

app.component.css 
app.component.html
app.component.spec.ts
app.component.ts 
app.module.ts
index.ts

app.component.css : archivo CSS que debe usar específico paracomponent.html

app.component.html : una vista (variable declarada en app.component.js)

app.component.spec.ts : utilizado para probarapp.component.ts

app.component.ts : su código que se une aapp.component.html

app.module.ts : esto es lo que inicia su aplicación y dónde define todos los complementos, componentes, servicios, etc. Este es el equivalente de app.jsen Angular 1

index.ts utilizado para definir o exportar archivos de proyecto

Información adicional:
Consejo profesional: puede ejecutar ng generate [option] [name]para generar nuevos servicios, componentes, tuberías, etc.

Además, el tsconfig.jsonarchivo es importante ya que define las reglas de compilación de TS para su proyecto.

Si estás pensando que tengo que aprender un idioma completamente nuevo? ... Uh ... un poco, TypeScript es un superconjunto de JavaScript. No te dejes intimidar; está ahí para facilitar su desarrollo. Sentí que lo entendía bien después de unas horas jugando con él, y lo tenía todo después de 3 días.

4. Se une a su HTML de forma similar a como lo haría en una directiva Angular 1. Tan variable como $scopey $rootScopeha quedado en desuso.

Este puede haber sido implicado. Angular 2 sigue siendo un MV *, pero usará ' componentes ' como una forma de vincular el código a sus plantillas, por ejemplo, tome lo siguiente

    import { Component } from '@angular/core';

    @Component({
         selector:'my-app',
         template: '<h1> Hello World! </h1>'
    })

    export class AppComponent {}

Aquí piense en la importdeclaración como su inyección de dependencia en un controlador v1. Usas importpara importar tus paquetes, donde import {Component}dice que harás un componentque te gustaría vincular a tu HTML.

Observe el @Componentdecorador que tiene un selectory template. Aquí piense en el selectorcomo su $scopeque usa como usa v1 directivesdonde el nombre del selectores el que usa para enlazar su HTML de esta manera

<my-app> </my-app>

¿Dónde <my-app>está el nombre de su etiqueta personalizada que usará que actuará como marcador de posición para lo que se declara en su plantilla? es decir) <h1> Hello World! </h1>. Mientras que esto se vería así en v1:

HTML

<h1>{{hello}}</h1>

JS

$scope.hello = "Hello World!"

También puede agregar algo entre estas etiquetas para generar un mensaje de carga, como este:

<my-app> Loading... </my-app> 

Luego mostrará " Cargando ... " como mensaje de carga.

Tenga en cuenta que lo que se declara templatees la ruta o el HTML sin formato que utilizará HTMLen su selectoretiqueta.

Una implementación más completa de Angular 1 se vería más así:

HTML

<h1 ng-controller="myCtrl">{{hello}}</h1>

En v1 esto se vería algo así

JS

angular.module('controller', [])



.controller('myCtrl', function( $scope) {
    $scope.hello = "Hello World!"
})

Esto es lo que realmente me gusta de v2. Encontré que la directiva era una curva de aprendizaje abrupta para mí en v1 e incluso cuando los descubrí, a menudo tenía el CSSrenderizado no como lo pretendía. Creo que esto es mucho más simple.

V2 permite una escalabilidad más fácil de su aplicación, ya que puede dividir su aplicación más fácilmente que en v1. Me gusta este enfoque, ya que puede tener todas sus partes de trabajo en un archivo en lugar de tener varias en v1 angular.

¿Qué pasa con la conversión de su proyecto de v1 a v2?

Según lo que he escuchado del equipo de desarrollo, si desea actualizar su proyecto v1 a v2, simplemente estará revisando y eliminando blobs obsoletos y reemplazando su $scopes con selectors. Encontré este video útil. Es con algunos del equipo de Ionic que están trabajando codo a codo con el equipo angular, ya que v2 tiene un enfoque más fuerte en dispositivos móviles https://youtu.be/OZg4M_nWuIk Espero que esto ayude.

ACTUALIZACIÓN: Actualicé agregando ejemplos a medida que surgieron implementaciones oficiales de Angular 2.

ACTUALIZACIÓN 2: Esto todavía parece ser una pregunta popular, así que pensé que sería un recurso que encontré muy útil cuando comencé a trabajar con angular 2.

Recursos útiles

Para obtener más información sobre ES6, recomiendo consultar los Tutoriales de nuevas características ECMAScript 6 / ES6 de The New Boston - Lista de reproducción de YouTube

Para escribir funciones mecanografiadas y ver cómo se compilan en Javascript, consulte el área de juegos del lenguaje mecanografiado

Para ver el desglose de una función por función de cuál es la equivalencia de Angular 1 en Angular 2, consulte Angular.io - Cookbook -A1 A2 Referencia rápida

Podría ayudarlo a comprender la comparación de Angular 1 vs Angular 2.

El Angular 2 demostró tener muchos beneficios sobre el Angular 1:

• Está completamente basado en componentes.
• Mejor detección de cambios
• La compilación anticipada (AOT) mejora la velocidad de representación.
• TypeScript se usa principalmente para desarrollar aplicaciones de Angular 2.
• Angular 2 tiene un mejor rendimiento que Angular 1.
• Angular 2 tiene un sistema de plantillas más potente que Angular 1.
• Angular 2 tiene API más simples, carga lenta, depuración más fácil.
• Angular 2 es mucho más comprobable que Angular 1.
• Angular 2 proporciona componentes anidados.
• Angular 2 proporciona una forma de ejecutar más de dos sistemas juntos.
• Y así...

Angular 2 y Angular 1 es básicamente un marco diferente con el mismo nombre.

angular 2 está más preparado para el estado actual de los estándares web y el estado futuro de la web (ES6 \ 7, inmutiablity, componentes, shadow DOM, trabajadores de servicios, compatibilidad móvil, módulos, mecanografía, etc.)

angular 2 eliminó muchas características principales en angular 1 como: controladores, $ scope, directivas (reemplazadas con anotaciones @component), la definición del módulo y mucho más, incluso cosas simples como ng-repeat no ha salido igual.

de todos modos, el cambio es bueno, angular 1.x tenía fallas y angular 2 está más preparado para los requisitos web futuros.

para resumir las cosas: no te recomiendo que comiences un proyecto angular 1.x ahora; este es probablemente el peor momento para hacerlo, ya que tendrás que migrar más tarde a angular 2, si te centras en angular que en elegir angular 2, google ya ha lanzado un proyecto con angular 2, y para cuando termine el proyecto, angular 2 ya debería estar en el centro de atención. si desea algo más estable, puede pensar en reaccionar \ elm y flux y redux como marcos JS.

angular 2 va a ser increíble, eso es sin duda.

Ningún marco es perfecto. Puedes leer sobre defectos en Angular 1 aquí y aquí . Pero eso no significa que sea malo. La pregunta es qué problema estás resolviendo. Si desea implementar rápidamente una aplicación simple, que sea liviana, con un uso limitado de enlace de datos , continúe con Angular 1. Angular 1 se construyó hace 6 años para resolver la creación rápida de prototipos, lo que hace bastante bien. Incluso si su caso de uso es complejo, puede usar Angular 1, pero debe tener en cuenta los matices y las mejores prácticas para crear una aplicación web compleja. Si está desarrollando una aplicación con fines de aprendizaje, sugeriría pasar a Angular 2, ya que es donde está el futuro de Angular.

La única característica sobresaliente en Angular v2 y también en ReactJs es que ambos han adoptado la nueva arquitectura de desarrollo de componentes web. Lo que esto significa es que ahora podemos crear componentes web independientes y conectarlos a cualquier sitio web del mundo que tenga la misma pila de tecnología que este componente web. ¡Frio! si muy bien :)

El otro cambio más destacado en Angular v2 es que su lenguaje de desarrollo primario no es otro que TypeScript. Aunque TypeScript pertenece a Microsoft, y es un superconjunto de JavaScript de 2015 (o ECMAScript6 / ES6), pero tiene algunas características que son muy prometedoras. Recomendaría a los lectores que revisen TypeScript con un poco de detalle (lo cual es divertido por supuesto) después de leer este tutorial.

Aquí diría que los tipos que intentan interrelacionar Angular v1 y Angular v2 confunden aún más a los lectores, y en mi humilde opinión, Angular v1 y Angular v2 deberían tratarse como dos marcos diferentes. En Angular v2, tenemos el concepto de Web-Components de desarrollar aplicaciones web, mientras que en Angular v1 tenemos que jugar con los Controladores, y (triste o afortunadamente) no hay controladores presentes en Angular v2.

Una cosa a notar es que angular2 está usando el mecanografiado.

Hice angular1 con cordova en mi pasante y ahora estoy haciendo un angular 2. Creo que angular2 será la tendencia, ya que es más estructurado en mi opinión, pero la desventaja es que hay pocos recursos para referir cuando tienes problemas o dificultades. angular 1.x tiene toneladas de directivas personalizadas que pueden ser súper fáciles de usar.

Espero eso ayude.

Angular 2 es mucho mejor que 1, al menos en lo que ofrece: soporte para componentes web, uso de mecanografiado, rendimiento y simplicidad general de la interfaz, fue la razón por la que decidí comenzar un proyecto usando angular 2. Sin embargo, desde el principio , Me di cuenta de que hay problemas en angular 2 (por ejemplo, enrutamiento con apache) para los cuales hay muy poca o ninguna documentación disponible, por lo que la documentación y la comunidad de angular 2 es el mayor obstáculo para angular 2, ya que no está lo suficientemente desarrollado.

Diría que si necesita crear un sitio rápidamente durante un plazo breve, use el conocido angular 1, si está en un proyecto más largo y puede darse el tiempo para investigar nuevos problemas (que podría ser el primero en encontrar , lo que podría ser una ventaja si piensas en la contribución que podrías dar a la comunidad angular 2) que ir con angular 2.