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+.
- 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
- 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.
- 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.
- 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