一、安裝Angular-Cli
1、查看你的node以及npm版本：
node -v? ? 查看node版本?
npm -v? ? ? 查看npm版本
設(shè)置淘寶鏡像，這樣下載東西就是從國(guó)內(nèi)網(wǎng)站下載了，網(wǎng)速更快
npm install -g @angular/cli? （國(guó)外下載）
===========================
cnpm install -g @angular/cli? （淘寶鏡像下載）
因?yàn)橹匦掳惭b? angular2 cli
ng -v? 查閱版本號(hào)
_? ? ? ? ? ? ? ? ? ? ? _? ? ? ? ? ? ? ? ____ _? ? ___
? / \? _ __? __ _ _? _| | __ _ _ __? ? / ___| |? |_ _|
? / △ \ | '_ \ / _` | | | | |/ _` | '__|? | |? | |? ? | |
/ ___ \| | | | (_| | |_| | | (_| | |? ? ? | |___| |___ | |
/_/? \_\_| |_|\__, |\__,_|_|\__,_|_|? ? ? \____|_____|___|
? ? ? ? ? ? ? |___/
Angular CLI: 1.6.3
Node: 8.9.3
OS: win32 x64
Angular:
...
所以項(xiàng)目中的node要更新npm install或者cnpm install
ng serve --port? 4244? （更換端口號(hào)）
Angular-CLI
說(shuō)到 cli 大家不陌生，每出一個(gè)框架都會(huì)有對(duì)應(yīng)的 cli ，俗稱腳手架。angular2 本身提供了起步項(xiàng)目 angular2-quickstart，我嘗試了一下，發(fā)現(xiàn)不是很好用，其它的大部分?jǐn)U展需要自行安裝，之后看了一下 angular-cli 部署簡(jiǎn)單易用，還提供了快捷搭建項(xiàng)目的目錄。
安裝
首先，最好先升級(jí) node 到 6.x 可以避免 node 版本過(guò)低帶來(lái)的不必要的麻煩。
npm install -g angular-cli
用法
ng --help
查看所有用法
創(chuàng)建本地開(kāi)發(fā)環(huán)境生成和運(yùn)行angular2項(xiàng)目
ng new PROJECT_NAME
cd PROJECT_NAME
ng serve
PROJECT_NAME?是你自己的項(xiàng)目名
部署成功后不報(bào)錯(cuò)的情況下到瀏覽器?http://localhost:4200/，修改項(xiàng)目中文件后會(huì)自動(dòng)部署
您可以配置默認(rèn)的 HTTP 端口和一個(gè) LiveReload server 用 --， 形如：
ng serve --host 0.0.0.0 --port 4201 --live-reload-port 49153
生成組件、指令、管道和服務(wù)
命令以?ng generate?開(kāi)頭，可以縮寫(xiě)為?ng g，下面給出創(chuàng)建 component 的幾種方式。
ng generate component my-new-component
ng g component my-new-component # using the alias
# components support relative path generation
# if in the directory src/app/feature/ and you run
ng g component new-cmp
# your component will be generated in src/app/feature/new-cmp
# but if you were to run
ng g component ../newer-cmp
# your component will be generated in src/app/newer-cmp
下表里是所有的命令：
創(chuàng)建路由
這里 cli 暫時(shí)禁用了創(chuàng)建路由，新的路由生成器即將到來(lái)，您可以在這里閱讀新路由器的官方文檔：https://angular.io/docs/ts/latest/guide/router.html
建立一個(gè) build
ng build
會(huì)生成到 dist/ 目錄下，其它關(guān)于測(cè)試，配置文件請(qǐng)大家去仔細(xì)閱讀，這里只給最基本的搭建流程。
組件實(shí)戰(zhàn)
看到這你可能已經(jīng)開(kāi)始嘗試了，創(chuàng)建項(xiàng)目的步驟相信大家參照上文可以輕松解決，這里我先嘗試創(chuàng)建一個(gè) component，命令如下。
ng g component nav
這里我創(chuàng)建了一個(gè) nav 組件。執(zhí)行成功后，后臺(tái)會(huì)自動(dòng)部署。我們看一下文件目錄有什么改變
多了一個(gè)叫做 nav 的文件夾，看一看文件目錄
我們發(fā)現(xiàn)與項(xiàng)目創(chuàng)建時(shí)自帶的 app component 目錄結(jié)構(gòu)相同，內(nèi)容也大同小異，大家可以嘗試去創(chuàng)建一個(gè)自己的組件，組件的樣式可以去對(duì)應(yīng)的 css 文件中修改。
這時(shí)我的 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 { }
這里不難看出全局自動(dòng)引入了?nav.component?組件。我們現(xiàn)在關(guān)心的問(wèn)題是組件之間的引用和數(shù)據(jù)傳輸，這里為了簡(jiǎn)單起見(jiàn)，只給引入的方法，而數(shù)據(jù)傳輸、路由機(jī)制這里不做解釋大家自行官網(wǎng)。
下面說(shuō)一下 app 內(nèi)引入 nav 組件，只需要改變?app.component.html?如下。
{{title}}
這里的 class 在對(duì)應(yīng)的?app.component.css?如下
.title {
font-size: 100px;
}
這時(shí)頁(yè)面自動(dòng)刷新字號(hào)變大 ，那么這里的?app-nav?標(biāo)簽從哪里得到的呢？
我們?nèi)?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'?說(shuō)明我們的指令就是?app-nav
此時(shí)頁(yè)面會(huì)呈現(xiàn)成這樣
好，到這里簡(jiǎn)單的組件引用已經(jīng)實(shí)現(xiàn)。
引入 Angular material2
文章開(kāi)頭已經(jīng)闡述了引入 Angular material2 的優(yōu)點(diǎn)，用過(guò)其它組件樣式框架的都明白。
安裝命令
npm install --save @angular/material
在 src/app/app.module.ts 中引入框架
import { MaterialModule } from '@angular/material';
// other imports
@NgModule({
imports: [MaterialModule.forRoot()],
...
})
export class PizzaPartyAppModule { }
引入核心和主體風(fēng)格，較 Angular material 1.x 的改進(jìn)在于可以選擇不同的色系。
我們這里用的是 Angular CLI 這里又可以鉆空子啦，添加下面一行到 style.css，注意是 src 目錄下的文件
@import '~@angular/material/core/theming/prebuilt/deeppurple-amber.css';
deeppurple-amber?主題顏色是可變的，具體看上文的文檔鏈接。
到這里一直打開(kāi)控制臺(tái)（是個(gè)好習(xí)慣）的朋友會(huì)發(fā)現(xiàn)類似下面的報(bào)錯(cuò)。
client:49 [default] J:\workspace\angular2\ts\epimss\node_modules\@angular2-material\slide-toggle\slide-toggle.d.ts:67:19
Cannot find name 'HammerInput'.
client:49 [default] J:\workspace\angular2\ts\epimss\node_modules\@angular2-material\core\gestures\MdGestureConfig.d.ts:4:39
Cannot find name 'HammerManager'.
文檔也給出了解釋，因?yàn)榭蚣苤?md-slide-toggle?和?md-slider?兩個(gè)組件依賴外部第三方組件?HammerJS?需要額外的配置。
我們不急著用文檔給的 npm 或引入 cdn 路徑，因?yàn)橛H測(cè)還是會(huì)報(bào)錯(cuò)，可能我引入方式有誤，為了大家少走彎路直接給親測(cè)有效的方法
我們先去命令行工具運(yùn)行?npm i --save-dev @types/hammerjs
然后編輯 tsconfig.json 文件將 hammerjs 添加到 types 下
"types": [
"jasmine", "hammerjs"
]
到這里發(fā)現(xiàn)頁(yè)面自動(dòng)刷新后報(bào)錯(cuò)消失了，如果需要字體圖標(biāo)可以在 src/index.html 中引入
目前為止，整個(gè) Angular material2 已經(jīng)整裝待發(fā)。
我們嘗試著添加多個(gè)按鈕組件測(cè)試一下，修改?app.component.html?文件，完整代碼如下
{{title}}
FLAT
RAISED
favorite
add
add
PRIMARY
ACCENT
WARN
OFF
OFF
check
沒(méi)問(wèn)題這里手懶不寫(xiě)布局樣式了，直接給 br 換行大家方便看些，待頁(yè)面部署完成后我們會(huì)看到以下效果
炫酷的組件，更多組件語(yǔ)法參考上面給的鏈接，到這里相信大家學(xué)習(xí) angular2 的信心倍增，真對(duì)已有組件可以完成快速開(kāi)發(fā)，下一步就是大家去 Angular2 官網(wǎng)看其它概念的時(shí)候啦，處理數(shù)據(jù)實(shí)現(xiàn)與后端對(duì)接。項(xiàng)目上線，大功告成。
