Angular2 RC5出ましたね

Angular2 RC5が出ましたね。

RC5からmoduleが追加されたということで、早速公式のチュートリアルをやってみようかと。 あと、手元にRC4の頃のチュートリアルのソースが残っていたので、簡単に比較してみようかと。

• 開発環境作

package.jsonの中身が変わってますね

• RC4

"@angular/common": "2.0.0-rc.4"
"@angular/compiler": "2.0.0-rc.4"
"@angular/core": "2.0.0-rc.4"
"@angular/platform-browser": "2.0.0-rc.4"
"@angular/platform-browser-dynamic": "2.0.0-rc.4"
"@angular/router": "3.0.0-beta.2"
"core-js": "^2.4.0"
"rxjs": "5.0.0-beta.6"
"systemjs": "^0.19.25"
"zone.js": "0.6.12" 

• RC5

"@angular/common": "2.0.0-rc.5"
"@angular/compiler": "2.0.0-rc.5"
"@angular/core": "2.0.0-rc.5"
"@angular/forms": "0.3.0"
"@angular/http": "2.0.0-rc.5"
"@angular/platform-browser": "2.0.0-rc.5"
"@angular/platform-browser-dynamic": "2.0.0-rc.5"
"@angular/router": "3.0.0-rc.1"
"@angular/router-deprecated": "2.0.0-rc.2"
"@angular/upgrade": "2.0.0-rc.5"
"systemjs": "0.19.27"
"core-js": "^2.4.0"
"reflect-metadata": "^0.1.3"
"rxjs": "5.0.0-beta.6"
"zone.js": "^0.6.12"
"angular2-in-memory-web-api": "0.0.15"
"bootstrap": "^3.3.6"

取り込むのモジュールが増えていますね。。。

• アプリの構成

• RC4

root
 |
 | - app
 |    |-app.componetn.ts
 |    |-main.ts
 |
 |- index.html

• RC5

root
 |
 | - app
 |    |-app.componetn.ts
 |    |-main.ts
 |    |-app.module.ts
 |
 |- index.html

app.module.tsが増えてますね。詳細後々

• 各ファイルの変更点 app.component.ts

  • RC4

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

@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }

• RC5

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

@Component({
  selector: 'my-app',
  template: '<h1>My First Angular 2 App</h1>'
})

export class AppComponent {}

このファイルは変更がありません。

app.module.ts

• RC5 　RC5で新規追加されたもの

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

@NgModule ({
  imports: [BrowserModule],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})

export class AppModule { }

main.ts

• RC4

import { bootstrap }    from '@angular/platform-browser-dynamic'
import { AppComponent } from './app.component'

bootstrap(AppComponent);

• RC5

import{ platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

微妙に変わってますね。

ざっくりと変更点だけを上げてみました。

バージョンが上がるたびに変更されると、なかなか大変だけどなんとかおってくしかないんだろうな。。。