Agenda

• Qué es esto de Angular 2.0?
• Qué significa esto para mi proyecto?
• Demo

Historia

• El equipo de AngularJS tomo la decisión de cambiar drásticamente a AngularJS.
• Google y en general los developers de Angular querían un mejor framework:
• Curva de aprendizaje menor
• Mejorar el Desempeño
• Anunciado ng-conf el 13 de Marzo de 2015
• Hasta hoy se han liberado al rededor de 45 releases.

Qué es lo nuevo?

• MOBILE FIRST
• FUTURE READY ECMAScript 6 (ES6) Y TYPESCRIPT
• FLEXIBLE DEVELOPMENT
• SPEED & PERFORMANCE
• SIMPLE & EXPRESSIVE
• COMPREHENSIVE ROUTING
• ANIMATIONS
• HIERARCHICAL DEPENDENCY INJECTION
• SUPPORT FOR WEB COMPONENTS
• INTERNATIONALIZATION (I18N) & ACCESSIBILITY

stay_primary_portraitMobile First stay_primary_portrait

• Filosofía
• Sistema de routing específico para aplicaciones móviles.
• Código de la aplicación liviano.
• Óptimo desempeño debido a que usa poca memoria.
• Soporte de gestos, toques y giros en el celular.

fast_forward Future Ready fast_forwardt

• Angular 2 está escrito sobre el último estándar de Javasctipt ECMAScript V6.
• Compilado sobre a TypeScript.
• Soporte para clases, el operador => , let y const
• Nuevas maneras de asignar objetos, valores por defecto, módulos y más.

favorite Flexible Development favorite

• Ofrece retrocompatibilidad y funcionalidad con:
• ECMAScript V5.
• Dart.
• CoffeeScript u otros lenguajes que compilen Javascript.

av_timer Speed and performance av_timer

• Detección de Cambio 5 veces más rápido.
• Usa el estándar mas modernos de Javascript.
• Immutables and observables.

code SIMPLE & EXPRESSIVE code

• Permite escribir código limpio y natural.
• Reduce la complejidad para el equipo de desarrollo.
• Código altamente legible y entendibles.

call_split COMPREHENSIVE ROUTING call_split

• Mapeo de URLS y componentes de la aplicación.
• Transiciones entre URLS.
• Rutas hermanas.
• Rutas anidadas.

flip ANIMATIONS flip

• Conjunto de animaciones compatibles.
• API de animación.
• secuencias complejas de animación.
• Rutas anidadas.

apps HIERARCHICAL DEPENDENCY INJECTION apps

• Mantener tu código modular.
• Código Mantenible y extensible.
• Probar tu código de la manera correcta.

web WEB COMPONENTS web

• Ofrece la creación e integración de web components.
• Similar a Polimer y X-Tags.
• Cambiar el DOM en tiempo real.

accessibility INTERNATIONALIZATION (I18N) & ACCESSIBILITY accessibility

• Permite usar características de traducción.
• Pluralización.
• Reglas de género.

Qué significa esto para mi proyecto?

Cambio, Migración, Ajuste, Conversión, Dolor, Sufrimiento, Pérdida de dinero, Pérdida de tiempo, ... ..., La Muerte

Component-Based UI

angular.module("example")
    .controller("ExampleCtrl", function() {
});

var AppComponent = ng.Component({
	selector: 'my-app',
	template: '
My First Angular 2 App
'
})
.Class({
	constructor: function () { }
});

Sintaxis de eventos asociados a los inputs

Adiós al $scope

angular.module("example").controller("ExampleCtrl", function($scope) {
    $scope.name = "John Smith";
});

(function() {
var AppComponent = ng
.Component({
selector: 'my-app',
template: '
My First Angular 2 App
'
})
.Class({
constructor: function () {
    this.name = "John Smith";
}
})();

demo

Estado Actual: Developer Preview versión 45 (Hace dos días)

Hola Mundo en Angular 2

1. Instalar NodeJS
2. Inicializar NodeJS npm init -y
3. Cambiar el package.json para incluir Angular
4. Instalar las dependencias
5. Crear nuestro archivo app.js
6. Crear nuestro archivo index.html
7. Correr npm start

Más Ejemplos y Referencias

Sitio Oficial de Angular 2

Ejemplos sobre los componentes de Angular 2, No Oficial

Hola Mundo Angular 2 (Propio)

Gracias