（一）angular-cli
Angular 提供了一個命令行工具angular-cli,它能讓用戶通過命令行創(chuàng)建和管理項目，用它可以自動創(chuàng)建執(zhí)行任務(wù)，添加新的控制器.......
要想安裝angular-cli,你首先得運行下列命令：
$npm install -g angular-cli@1.0.0-beta.18
打開終端窗口，運行ng new angualr2HelloWorld（創(chuàng)建項目）
創(chuàng)建成功后，在你的項目文件夾下會出現(xiàn)一堆文件，我們所在意的也就是src,以.spec.ts結(jié)尾的都是跟測試有關(guān)的文件，.html是組建的view,.css是組建的樣式代碼，.component.ts是組件的核心ts代碼。app.module.ts則是整個項目的根組件。也可以說是項目的入口。
創(chuàng)建組件的命令為：ng g c 組件名
啟動應(yīng)用（項目）命令為：ng serve
到此hello-world小demo已經(jīng)創(chuàng)建成功，并且可以運行起來了。
（二）TypeScript和RxJS
angular2是依賴于ts編程的，而ts又是基于ES6的，JS是ES5，那么ES6是JS的更先進(jìn)版，RxJS嘛，就比較新穎，它是函數(shù)響應(yīng)式編程.RxJS是一個通過使用可觀察序列來構(gòu)建異步和基于事件的程序的庫。它提供了一個核心類型:Observable，在angular2里面大量運用了RxJS,所以我建議在學(xué)習(xí)angular2之前最好先學(xué)習(xí)一下RxJS和ES6。
（三）運用angular2的最基礎(chǔ)只是來搭建demo
此demo結(jié)合了路由嵌套，表單，http服務(wù)，自定義指令。
1.創(chuàng)建項目angular2DemoAll：
? ?ng new angular2DemoAll
2.創(chuàng)建組件***:
ng g c ***
此時demo目錄結(jié)構(gòu)為：
期重app組件為根組件，login,main為根組件下的直接子組件，其他組件為main子組件(路由嵌套情況與此相同)。
3.導(dǎo)入第三方依賴
項目我仍延用了angular1項目中類庫jQuery和UI庫bootsrap，本來打算再研究一下semantic-ui但太耗時了，就沒來得及學(xué)習(xí)，首先要將jQuery和bootstrap包下載好
npm install --save-dev jQuery
npm install --save-dev bootsrap
然后打開你的項目目錄，在node_modules文件夾下面找到angular-cli.json文件，然后將jQuery和UI庫bootsrap添加到相應(yīng)的位置。如下圖：
最后在你需要引用$的組件里導(dǎo)入jquery.即可
我當(dāng)時還百度了一種做法，是直接聲明：declare var $:any，但我試了不能用。具體因為什么我還沒研究出來。
4.app組件
import {
? ? ?routes as childRoutes,
? ? ?MainComponent,
? ? ?MainComponentModule
} from './main/main.component';
這段代碼作用是引入了main模塊，main組件以及子路由，為什么這里出現(xiàn)main模塊呢，因為main組件的子組件太多了，為了條理就加了module,Angular 是模塊化 （1）Modules 導(dǎo)出 classes, function, values ，（2） 以便在其他模塊導(dǎo)入使用.angular應(yīng)用由模塊組成，（3）每個模塊都做此模塊相關(guān)的事情。
const routes:Routes = [
? ? ? {path:'',redirectTo:'login',pathMatch:'full'}, ? ? ? ? ?//redictTo指路由重定向
? ? ?{path:'main',component:MainComponent,children: childRoutes},
? ? ? {path:'login',component:LoginComponent},
]
這段代碼是在描述路由配置，然后由RouterModule.forRoot(routes)來為程序提供使用路由的依賴，children屬性值即為相應(yīng)的子路由。
下圖即為view視圖，router-outlet 為占位符，就相當(dāng)于AngularJS里的ui-view.
5.main組件
我把MainComponentModule也寫在了main.component.ts里
export const routes:Routes = [
? ? ? {path:'',redirectTo:'home',pathMatch:'full'},
? ? ?{path:'home',component:HomeComponent},
? ? ?{path:'hospital',component:HospitalComponent},
? ? ? {path:'role',component:RoleComponent},
? ? ? {path:'people',component:PeopleComponent},
];
這段代碼定義的main子路由，和app.module里定義方法一樣。
this.router.navigate(['./',id],{relativeTo:this.route});這句代碼是手動告訴路由器導(dǎo)航到指定路由。
下面說一下引入的各個模塊的作用：
ActivatedRoute使用路由參數(shù)，RouterModule和Routes只要只用angular2路由器就得引入，Router則是為了通過Router實例來手動控制路由跳轉(zhuǎn)。
FormsModule,ReactiveFormsModule為表單導(dǎo)入，前者提供模板驅(qū)動指令ngModel和NgForm，后者提供formControl和ngFormGroup指令
UiNavDirective為我的自定義指令。
6.nav組件
[routerLink]相當(dāng)于ui-sref,又因為是嵌套路由的子路由所以['./hospital']路由前面得加“./”。
var elem = $(el.nativeElement)這步是將我們能取到的指令所在元素轉(zhuǎn)化成我們熟知的jquery元素，然后再進(jìn)行運算。
7.people組件
@Injectable()是聲明此服務(wù)可以被組件引用。Observable是RxJS里面的可觀察對象，RxJS存在理念就是用可觀察序列將異步事件以同步的形式展現(xiàn)出來。其中可觀察序列就是基于Observable的。this.http.get()是angular2的get通信方式，map()也是RxJS里的流方法，沒什么深層含義，只是讓他的function參數(shù)異步執(zhí)行，并以流的形式將結(jié)果返回。res.json()則是將得到的結(jié)果轉(zhuǎn)化成接口上寫的形式，因為angular2的get通信將返回結(jié)果類型改變了，必須通過res.json()將其轉(zhuǎn)換回來。
在這里我是用了FormBuilder來構(gòu)建表單，他比ngForm和ngControl隱式的構(gòu)建表單更加靈活，里面的serarchResult類來存儲查找的結(jié)果。
this.findForm = fb.group({……});是用FormBuilder的實例化對象fb的group方法創(chuàng)建新的FromGroup。然后在視圖通過指令[formGroup]="findForm"使用findForm。最后將FormControl綁定到對應(yīng)的input框，如：[formControl]="findForm.controls['userName']"。
8.組件之間的傳值
我的demo里面的header組件需要用login組件里用戶登陸后的返回值，我用了login服務(wù)作為中間鍵進(jìn)行通信如下。
import {Injectable} from '@angular/core';
@Injectable()
export class login{
? ? ?data:Object;
}
login組件賦值，大家注意這里的post請求方式。
然后header組件直接用就可以
注意：我這里使用的都是自己的接口，大家參考時請用自己的接口替換，另外有很多文件我截圖不完整，不過主要代碼都在這里！此項目我沒整理目錄結(jié)構(gòu)，如有需要，可以自己整理一下！
