設(shè)置開發(fā)環(huán)境
1.安裝 node環(huán)境谭溉，檢查node和npm的版本號(hào)；確保你正在運(yùn)行 node 6.9.x 和 npm 3.x.x 以上的版本橡卤。
2.全局安裝Angular CLI（是一個(gè)命令行界面工具扮念，可以創(chuàng)建項(xiàng)目，添加文件以及執(zhí)行一大堆的開發(fā)任務(wù)碧库，
比如測試削锰、打包廷支、發(fā)布拣凹。）
輸入命令：npm install -g @angular/cli
3.創(chuàng)建新項(xiàng)目
在終端命令中础浮，運(yùn)行下面的命令來自動(dòng)創(chuàng)建一個(gè)承載開發(fā)文件的文件夾(mky-app 名稱隨便)。
輸入命令：ng new my-app
4.啟動(dòng)開發(fā)服務(wù)器
輸入命令： cd my-app
ng serve --open
(ng serve 命令會(huì)啟動(dòng)服務(wù)器沽瞭，監(jiān)聽文件變化迁匠，并在修改這些文件是重新構(gòu)造此應(yīng)用。)
（使用--open或-o參數(shù)可以自動(dòng)打開瀏覽器并訪問 http://localhost:4200/ ）
至此驹溃，angularJs構(gòu)建就搭建完成了城丧。
項(xiàng)目文件總覽
| File 文件 | Purpose 用途 |
|---|---|
app/app.component.{ts,html,css,spec.ts} |
使用HTML模板、CSS樣式和單元測試定義AppComponent組件豌鹤。 它是根組件亡哄，隨著應(yīng)用的成長它會(huì)成為一棵組件樹的根節(jié)點(diǎn)。 |
app/app.module.ts |
定義`AppModule`布疙，這個(gè)[根模塊](https://www.angular.cn/guide/bootstrapping "AppModule: 根模塊")會(huì)告訴Angular如何組裝該應(yīng)用蚊惯。 目前，它只聲明了`AppComponent`灵临。 稍后它還會(huì)聲明更多組件拣挪。 |
assets/* |
這個(gè)文件夾下你可以放圖片等任何東西，在構(gòu)建應(yīng)用時(shí)俱诸，它們?nèi)紩?huì)拷貝到發(fā)布包中。 |
environments/* |
這個(gè)文件夾中包括為各個(gè)目標(biāo)環(huán)境準(zhǔn)備的文件赊舶，它們導(dǎo)出了一些應(yīng)用中要用到的配置變量睁搭。 這些文件會(huì)在構(gòu)建應(yīng)用時(shí)被替換赶诊。 比如你可能在產(chǎn)品環(huán)境中使用不同的API端點(diǎn)地址，或使用不同的統(tǒng)計(jì)Token參數(shù)园骆。 甚至使用一些模擬服務(wù)舔痪。 所有這些，CLI都替你考慮到了锌唾。 |
index.html |
這是別人訪問你的網(wǎng)站是看到的主頁面的HTML文件锄码。 大多數(shù)情況下你都不用編輯它。 在構(gòu)建應(yīng)用時(shí)晌涕，CLI會(huì)自動(dòng)把所有js和css文件添加進(jìn)去滋捶，所以你不必在這里手動(dòng)添加任何 <script> 或 <link> 標(biāo)簽。 |
main.ts |
這是應(yīng)用的主要入口點(diǎn)余黎。 使用[JIT compiler](https://www.angular.cn/guide/glossary#jit)編譯器編譯本應(yīng)用重窟，并啟動(dòng)應(yīng)用的根模塊`AppModule`，使其運(yùn)行在瀏覽器中惧财。 你還可以使用[AOT compiler](https://www.angular.cn/guide/glossary#ahead-of-time-aot-compilation)編譯器巡扇，而不用修改任何代碼 —— 只要給`ng build` 或 `ng serve` 傳入 `--aot` 參數(shù)就可以了。 |
polyfills |
不同的瀏覽器對Web標(biāo)準(zhǔn)的支持程度也不同垮衷。 填充庫（polyfill）能幫我們把這些不同點(diǎn)進(jìn)行標(biāo)準(zhǔn)化厅翔。 你只要使用`core-js` 和 `zone.js`通常就夠了，不過你也可以查看[瀏覽器支持指南](https://www.angular.cn/guide/browser-support)以了解更多信息搀突。 |
styles.css |
這里是你的全局樣式刀闷。 大多數(shù)情況下，你會(huì)希望在組件中使用局部樣式描姚，以利于維護(hù)涩赢，不過那些會(huì)影響你整個(gè)應(yīng)用的樣式你還是需要集中存放在這里。 |
test.ts |
這是單元測試的主要入口點(diǎn)轩勘。 它有一些你不熟悉的自定義配置筒扒，不過你并不需要編輯這里的任何東西。 |
tsconfig.app.json和tsconfig.spec.json |
TypeScript編譯器的配置文件绊寻。`tsconfig.app.[json](https://www.angular.cn/api/common/JsonPipe)`是為Angular應(yīng)用準(zhǔn)備的花墩，而`tsconfig.spec.[json](https://www.angular.cn/api/common/JsonPipe)`是為單元測試準(zhǔn)備的。 |
其他的文件就不一一列舉了澄步，詳細(xì)介紹請看文檔冰蘑。
雙向數(shù)據(jù)綁定
<div>
<label>name: </label>
<input [(ngModel)]="hero.name" placeholder="name">
</div>
[(ngModel)]是一個(gè)angularJs的語法，用于把hero.name 的綁定到輸入框中村缸，數(shù)據(jù)流是雙向的祠肥，從屬性到輸入框并且從輸入框到屬性。
不過當(dāng)input 添加了這項(xiàng)之后梯皿。瀏覽器會(huì)報(bào)出一個(gè)錯(cuò)誤[ngModel] ... isn't a known property of input.”（[ngModel]不是input元素的已知屬性）
雖然 ngModel是angularJs的一個(gè)有效指令仇箱，但默認(rèn)情況下是不可用的县恕。它屬于一個(gè)可選模塊FormsModule。必須得先導(dǎo)入FormsModulem模塊剂桥。
打開app,module.ts文件忠烛，并且從@angular/forms庫中導(dǎo)入符號(hào)FormsModule，然后把FormsModule添加到@ngModule元數(shù)據(jù)improts數(shù)組中权逗。
通過使用ngFor來循環(huán)列表
<li *ngFor='let hero of heroes'></li>
ngFor 的*前綴表示<li>及其子元素組成一個(gè)主控模板斟薇。
引號(hào)中賦值給ngFor的那段文本表示*從heroes數(shù)組中取出每一個(gè)元素师坎，存入到一個(gè)局部hero變量，并讓他們在相應(yīng)的模板實(shí)例中可用*
處理點(diǎn)擊事件
在<li>元素上插入一句點(diǎn)擊事件的綁定代碼：
<li *ngFor='let hero of heroes' (click)="onSelect(hero)">...</li>
圓括號(hào)標(biāo)識(shí)<li>元素上的click事件是綁定目標(biāo)奔垦，等號(hào)右邊的onSelect(hero)表達(dá)式調(diào)用AppCompoent的onSelect()方法屹耐，并把模板輸入變量hero作為參數(shù)傳進(jìn)去。
組件編寫
.組件的類名應(yīng)該是大駝峰形式椿猎，并且以Component 結(jié)尾惶岭。形如:HeroDetailComponent。
.組件的文件名應(yīng)該是小寫中線形式,形如：kebab-case,每個(gè)單詞之間用中線分隔犯眠。并且是以.component.ts結(jié)尾按灶。
.要定義一個(gè)組件，必定需要導(dǎo)入AngularJs的符號(hào)Component, @Component裝飾器為組件提供Angular元數(shù)據(jù);selectorCSS選擇器的名字筐咧，會(huì)匹配元素的標(biāo)簽名鸯旁。用于在父元素組件的模板中標(biāo)記出當(dāng)前組件的位置。
.在AppModule中聲明組件類量蕊。每個(gè)組件都必須有一個(gè)（且只有一個(gè)）Angular模塊中聲明铺罢。
形如：import{ HeroDetailComponent } from './hero-detail.component'。
.把組件添加到該模塊的declarations數(shù)組中残炮；通常declarations數(shù)組包含應(yīng)用中的屬于該模塊的組件韭赘、管道和指令列表。組件在被其他組件引用之前都在一個(gè)模塊中聲明過势就。
