Angular 2 beta, diferencias de código con la versión Alpha 48

El 15 de diciembre se anunció la publicación de Angular 2 beta, y han cambiado unos cuantos detalles a nivel de código, que debéis tener en cuenta si habéis estado trabajando con la versión Alpha, y sobre todo los que leisteis mi artículo:

Hello World en AngularJS 2 con typescript y NPM (node.js)

Los cambios

Se producen cambios:

- en la inclusión de librerías.

- por lo tanto, en la configuración de NPM en package.json:

- en cómo implementamos el código.

Cambios en la configuración de NPM

Principalmente hay que incluir librerías que han extraído de las librerías de Angular, por ejemplo, rxjs, reflect-metada y zone.

Voy a utilizar imágenes pero al final del artículo podréis encontrar la versión final del Hello World en github:

Cambios en la inclusión de librerías en el html

Consecuencia de esta división, es que tenemos que incluir más archivos de javascript, aquí las diferencias. Rx.js se incluye como archivo aparte, y para incluir zone y reflect-metadata, lo más fácil es incluir la librería angular2-polyfills.js.

Para cualquier cambio que se pueda producir al respecto, siempre es útil poder consultar la etiqueta "dependencies" del package.json del propio proyecto de angularjs:

https://github.com/angular/angular/blob/master/package.json#L34

Cambios en el código

Incluyo en esta sección los cambios más significativos que he podido detectar:

1.-El primero es dónde encontramos el módulo bootstrap, ya no podemos utilizar el siguiente import general:

import{bootstrap, Component} from 'angular2/angular2'

El motivo principal es que ha desaparecido de angular el archivo angular2.d.ts, que es donde apuntaba.

Ahora tendremos que codificarlo así:

import {bootstrap} from 'angular2/platform/browser'
import{Component} from 'angular2/core'

2.-Cambia la nomenclatura de las etiquetas de las directivas que utilizamos en el HTML, el cambio principal es que se elimina el guión "-" entre "ng" y la propiedad y la primera letra de la propiedad se hace mayúscula. Así pasamos de tener:

Alpha:

<input [(ng-model)]="hero.name" placeholder="name"/>

<input [(ng-model)]="hero.name" placeholder="name"/>

<div [ng-class]="heronew">

<a [router-link]="['Dashboard']">Dashboard</a>

<div *ng-for="#hero of heroes" class="col-1-4" (click)="gotoDetail(hero)">

<div *ng-if="hero">

<input #my-input>

Beta:

<input [(ngModel)]="hero.name" placeholder="name"/>

<input [(ngModel)]="hero.name" placeholder="name"/>

<div [ngClass]="heronew">

<a [routerLink]="['Dashboard']">Dashboard</a>

<div *ngFor="#hero of heroes" class="col-1-4" (click)="gotoDetail(hero)">

<div *ngIf="hero">

<input #myInput>

3.-Antes la aplicación por defecto corría en modo producción por defecto y ahora en beta, corre en modo "dev". Para cambiar a producción hay que llamar al método enableProdMode().

Referencias

https://angular.io/docs/ts/latest/quickstart.html

https://github.com/angular/angular/blob/master/CHANGELOG.md#200-alpha54-2015-12-15

Código final

Podéis consultar cómo quedó al final el código HelloWorld después de incluir las novedades de la versión Beta.

https://github.com/dactivo/Angularjs-2-helloworld-beta

Esto se pone interesante :-)

Escrito el 17 dic 2015
comments powered by Disqus

« Error con dnx / mono en Mac: ExceptionHandlerMiddleware: kqueue() FileSystemWatcher has reached the maximum number of files to watch - ASP.NET 5 con SQLite, Entity Framework 7 y Angularjs 1 »