AngularJS 2
One framework. Mobile and desktop.
Álvaro José Agámez Licha - @CodeMaxter
MedellínJS
Medellín - Colombia, 2016/02/24
Fast
Angular computes updates based on changes to data, not DOM, for fast updates that scale to the largest data sets with minimal memory overhead.
Mobile
With Angular Universal for server-side rendering and Web Workers for smooth scrolling and transitions, Angular 2 solves the core challenges in mobile web performance.
Flexible
Supports several languages including plain JavaScript, TypeScript, and Dart. Also supports both object-style data structure with POJO data-binding and functional reactive style with unidirectional data flow and support for observables and immutable data structures.
AngularJS 2.0 Now in Beta
The Basics
En Angular se visualiza la información definiendo componentes. Los datos en sus componentes es automáticamente disponible para ser visualizada en los templates o controlar como estos son rederizados como en el ejemplo a continuación.
Mintras este ejemplo usa TypeScript, Angular trabaja de igual forma con ES5, ES6 y Dart.
<label>Name:</label>
<!-- data-bind to the input element; store value in yourName -->
<input type="text" [(ngModel)]="yourName" placeholder="Enter a name here">
<hr>
<!-- conditionally display `yourName` -->
<h1 [hidden]="!yourName">Hello {{yourName}}!</h1>
import {Component} from 'angular2/core';
@Component({
// Declare the tag name in index.html to where the component attaches
selector: 'hello-world',
// Location of the template for this component
templateUrl: 'app/hello_world.html'
})
export class HelloWorld {
// Declaring the variable for binding with initial value
yourName: string = '';
}import {bootstrap} from 'angular2/platform/browser';
import {HelloWorld} from './hello_world';
bootstrap(HelloWorld);
<body>
<hello-world>Loading...</hello-world>
</body>(function(app) {
app.AppComponent =
ng.core.Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
})
.Class({
constructor: function() {}
});
})(window.app || (window.app = {}));import {Component} from 'angular2/core';
@Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }JavaScript vs TypeScript
TypeScript, Why?
La nueva versión de AngularJS está totalmente escrita usando TypeScript, un superset de JavaScript desarrollada por Microsoft, la cual implementa características de las próximas versiones de EcmaScript, además de tipado fuerte y otras características que solo están disponibles en lenguajes de alto nivel como C# o Java.
Aunque es totalmente posible escribir aplicaciones AngularJS 2 usando ES5 o ES6 (incluso en Dart), la forma más fácil y conveniente es usando TypeScript
Cambios 1.x vs 2.0
Directiva Elemento ==> Component
Directiva Atributo ==> Directiva
Factory ==> Desaparece
Servicio ==> Servicio
Un poco de rendimiento
Code Time
AngularJS 2
By Alvaro Agamez
