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

原创
2016/09/17 10:30
阅读数 2.5K

就在中秋佳节来临之际,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

展开阅读全文
打赏
0
11 收藏
分享
加载中
悟_箜博主

引用来自“12叔”的评论

终于等到你
终于来啦20
2016/09/17 11:25
回复
举报
终于等到你
2016/09/17 11:24
回复
举报
更多评论
打赏
2 评论
11 收藏
0
分享
返回顶部
顶部