Angular-CLI
說到 cli 大家不陌生，每出一個框架都會有對應的 cli ，俗稱腳手架。angular2 本身提供了起步項目 angular2-quickstart，我嘗試了一下，發現不是很好用，其它的大部分擴展需要自行安裝，之后看了一下 angular-cli 部署簡單易用，還提供了快捷搭建項目的目錄。
安裝
首先，最好先升級 node 到 6.x 可以避免 node 版本過低帶來的不必要的麻煩。
npm install -g angular-cli
用法
ng --help
查看所有用法
創建本地開發環境生成和運行angular2項目
ng new PROJECT_NAMEcd PROJECT_NAMEng serve
PROJECT_NAME 是你自己的項目名
部署成功后不報錯的情況下到瀏覽器 http://localhost:4200/，修改項目中文件后會自動部署
您可以配置默認的 HTTP 端口和一個 LiveReload server 用 --， 形如：
ng serve --host 0.0.0.0 --port 4201 --live-reload-port 49153
生成組件、指令、管道和服務
命令以 ng generate 開頭，可以縮寫為 ng g，下面給出創建 component 的幾種方式。
ng generate component my-new-componentng g component my-new-component # using the alias# components support relative path generation# if in the directory src/app/feature/ and you runng g component new-cmp# your component will be generated in src/app/feature/new-cmp# but if you were to runng g component ../newer-cmp# your component will be generated in src/app/newer-cmp
下表里是所有的命令：
創建路由
這里 cli 暫時禁用了創建路由，新的路由生成器即將到來，您可以在這里閱讀新路由器的官方文檔：https://angular.io/docs/ts/latest/guide/router.html
建立一個 build
ng build
會生成到 dist/ 目錄下，其它關于測試，配置文件請大家去仔細閱讀，這里只給最基本的搭建流程。
組件實戰
看到這你可能已經開始嘗試了，創建項目的步驟相信大家參照上文可以輕松解決，這里我先嘗試創建一個 component，命令如下。
ng g component nav
這里我創建了一個 nav 組件。執行成功后，后臺會自動部署。我們看一下文件目錄有什么改變
多了一個叫做 nav 的文件夾，看一看文件目錄
我們發現與項目創建時自帶的 app component 目錄結構相同，內容也大同小異，大家可以嘗試去創建一個自己的組件，組件的樣式可以去對應的 css 文件中修改。
這時我的 app.module.ts 變成了如下
import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';import { FormsModule } from '@angular/forms';import { HttpModule } from '@angular/http';import { AppComponent } from './app.component';import { NavComponent } from './nav/nav.component';@NgModule({ declarations: [ AppComponent, NavComponent ], imports: [ BrowserModule, FormsModule, HttpModule, ], providers: [], bootstrap: [AppComponent]})export class AppModule { }這里不難看出全局自動引入了 nav.component 組件。我們現在關心的問題是組件之間的引用和數據傳輸，這里為了簡單起見，只給引入的方法，而數據傳輸、路由機制這里不做解釋大家自行官網。
下面說一下 app 內引入 nav 組件，只需要改變 app.component.html 如下。
<h1 class="title"> {{title}}</h1><app-nav></app-nav>這里的 class 在對應的 app.component.css 如下
.title { font-size: 100px;}這時頁面自動刷新字號變大 ，那么這里的 app-nav 標簽從哪里得到的呢？
我們去 nav.component.ts 里看一眼
import { Component, OnInit } from '@angular/core';@Component({ selector: 'app-nav', templateUrl: './nav.component.html', styleUrls: ['./nav.component.css']})export class NavComponent implements OnInit { constructor() { } ngOnInit() { }}不難看出 selector: 'app-nav' 說明我們的指令就是 app-nav
此時頁面會呈現成這樣
好，到這里簡單的組件引用已經實現。
引入 Angular material2
文章開頭已經闡述了引入 Angular material2 的優點，用過其它組件樣式框架的都明白。
安裝命令
npm install --save @angular/material
在 src/app/app.module.ts 中引入框架
import { MaterialModule } from '@angular/material';// other imports@NgModule({ imports: [MaterialModule.forRoot()], ...})export class PizzaPartyAppModule { }引入核心和主體風格，較 Angular material 1.x 的改進在于可以選擇不同的色系。
我們這里用的是 Angular CLI 這里又可以鉆空子啦，添加下面一行到 style.css，注意是 src 目錄下的文件
@import '~@angular/material/core/theming/prebuilt/deeppurple-amber.css';
deeppurple-amber 主題顏色是可變的，具體看上文的文檔鏈接。
到這里一直打開控制臺（是個好習慣）的朋友會發現類似下面的報錯。
client:49 [default] J:/workspace/angular2/ts/epimss/node_modules/@angular2-material/slide-toggle/slide-toggle.d.ts:67:19Cannot find name 'HammerInput'.client:49 [default] J:/workspace/angular2/ts/epimss/node_modules/@angular2-material/core/gestures/MdGestureConfig.d.ts:4:39Cannot find name 'HammerManager'.
文檔也給出了解釋，因為框架中 md-slide-toggle 和 md-slider 兩個組件依賴外部第三方組件 HammerJS 需要額外的配置。
我們不急著用文檔給的 npm 或引入 cdn 路徑，因為親測還是會報錯，可能我引入方式有誤，為了大家少走彎路直接給親測有效的方法
我們先去命令行工具運行 npm i --save-dev @types/hammerjs
然后編輯 tsconfig.json 文件將 hammerjs 添加到 types 下
"types": [ "jasmine", "hammerjs"]
到這里發現頁面自動刷新后報錯消失了，如果需要字體圖標可以在 src/index.html 中引入
<link rel="stylesheet">
目前為止，整個 Angular material2 已經整裝待發。
我們嘗試著添加多個按鈕組件測試一下，修改 app.component.html 文件，完整代碼如下
<h1 class="title"> {{title}}</h1><app-nav></app-nav><button md-button>FLAT</button><button md-raised-button>RAISED</button><button md-icon-button> <md-icon class="md-24">favorite</md-icon></button><button md-fab> <md-icon class="md-24">add</md-icon></button><button md-mini-fab> <md-icon class="md-24">add</md-icon></button><br/><br/><button md-raised-button color="primary">PRIMARY</button><button md-raised-button color="accent">ACCENT</button><button md-raised-button color="warn">WARN</button><br/><br/><button md-button disabled>OFF</button><button md-raised-button [disabled]="isDisabled">OFF</button><button md-mini-fab [disabled]="isDisabled"><md-icon>check</md-icon></button>沒問題這里手懶不寫布局樣式了，直接給 br 換行大家方便看些，待頁面部署完成后我們會看到以下效果
炫酷的組件，更多組件語法參考上面給的鏈接，到這里相信大家學習 angular2 的信心倍增，真對已有組件可以完成快速開發，下一步就是大家去 Angular2 官網看其它概念的時候啦，處理數據實現與后端對接。項目上線，大功告成。
總結
當今前端框架層出不窮，不要盲從，要根據公司需求和員工的工作經驗選擇框架，真說到性能方面哪個框架快的話，我雖然沒測試過，但我確定 React、Vue、Angular2 幾個之間相差無幾，除非在實現的時候代碼存在問題，因為這幾個框架都經過了大型項目的考驗。以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。
新聞熱點
疑難解答
