[Angular2] 升级到Angular 2 final正式版

就在中秋佳节来临之际，Angular 2 final正式版发布，标志着Angular 2 已经正式向我们走来～～所以大家也不要犹豫了，还没有尝鲜的赶紧去试一下吧。 (☆_☆)

今天我们主要把我们之前写的几篇Angular 2的文章升级到正式版，其实从RC 6可以非常平滑的升级到正式版，几乎不需要改动什么。如果是从RC 4或者更低版本的话，不好意思，你可能真得去看看官网的breaking change了，改动的地方还真是不少的。。。

RC 5升级到 Angular 2.0 正式版

那我们从RC 5升级呢，其实也很简单，唯一我们需要注意的其实就是，directives从@Component中移除了，也就是说当你定义一个component的时候，它已然没有了directives属性了，那么我们怎么引入原先放在directives属性里的common components／directives/pipes呢？？？回想一下在angular 1.x中是放在哪呢？没错，挂在module下面，所以在RC 6以后，所有在这个module中要用到的components／directives/pipes必须要在module这里声明，也就是必须要放到@Module的属性declarations里！！我已将之前写的几篇文章从RC 5升级到Angular 2.0正式版，router 3.0，详情请猛戳下面的链接凸^-^凸

[Angular2]比Angular 2官方更容易理解的Quick Start

[Angular2]创建简单的Angular 2 NgModule与Components

[Angular2] 添加Angular 2 router(路由)配置信息

[Angular2] Angular 2中NgModule，Lazy Loading与Route

实例

下面我们来看一下我们到底都改动了哪些东西

首先必然是package.json,除了angular 2升级到2.0以外，typescript也升级到了pre－release的2.0

{
  "name": "angular2-quick-start",
  "version": "0.0.1",
  "description": "This is one sample for Angular2 quick start",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "live-server --port=22222 --entry-file=index.html"
  },
  "author": "Wu Kong",
  "dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/router": "3.0.0",
    
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "^0.19.31",
    "zone.js": "^0.6.23",
    "core-js": "^2.4.1"
  },
  "devDependencies": {
    "live-server": "^0.8.2",
    "typescript": "^2.0.2"
  }
}

执行npm install：

接下来我们需要做的就是把app与header组件中的directives属性中的components／directives/pipes全部移到app module的declarations中去，并且把所有的directives属性全部删除

App Module

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

import { BlogModule } from './blog/blog.module';

import {NavbarComponent} from './common/components/navbar/navbar.component';
import HeaderComponent from './common/components/header/header.component';
import FooterComponent from './common/components/footer/footer.component';
import AppComponent from './common/components/app.component';
import { HomeComponent } from './common/components/index';
import { routing } from './common/router/app.routing';

@NgModule({
    imports: [
        BrowserModule,
        BlogModule,
        routing,
    ],
    declarations: [AppComponent, HomeComponent, NavbarComponent,HeaderComponent, FooterComponent],
    bootstrap: [AppComponent],
})

export class AppModule { }

OK～大功告成～

从RC 5升级到2.0 final就是这么简单～～

所有更新的代码都已经上传到GitHub： https://github.com/WuKongW/Angular2_POC