學(xué)習(xí)Angular
1牵囤、環(huán)境WebStrom(推薦2017版本)
由于Angular2之后由Typescript編寫(xiě)嫩码，新版本支持的TypeScript版本較高洗搂，推薦新版本缨称。
2讯沈、安裝nodeJS
注意：可以將npm替換為cnpm
3郁岩、安裝Angular cli
cnpm install -g @angular/cli
用 ng v 檢測(cè)有沒(méi)有安裝成功：如圖
4、安裝TypeScript
cnpm install -g typescript
5、創(chuàng)建項(xiàng)目
（1）在命令窗口：ng new 項(xiàng)目名
（2）在WebStrom中File=>New=>project=>Angular CLI
比較慢问慎，需要耐心等待
6萍摊、會(huì)自動(dòng)化的創(chuàng)建工程，根據(jù)package.json中的依賴（"dependencies"）自動(dòng)生成node_modules文件蝴乔。工程目錄說(shuō)明：
- e2e：端到端的測(cè)試目錄（用來(lái)做自動(dòng)測(cè)試的）
- node_modules：第三方依賴包存放目錄
- src：應(yīng)用程序源代碼目錄
- angular-cli.json ：Angular命令行工具的配置文件记餐。后期可能會(huì)修改它，引入一些其他的第三方包薇正，例如jQuery等
- karma.conf.js：karma是單元測(cè)試的執(zhí)行器片酝，karma.conf.js是karma的配置文件
- package.json：標(biāo)準(zhǔn)的npm工具的配置文件(包含該應(yīng)用程序所使用的第三方依賴包)
說(shuō)明：新建項(xiàng)目時(shí)，下載的第三方包挖腰，在此處添加依賴雕沿，下載完畢后的包存放在node_modules目錄中
- protractor.conf.js：自動(dòng)化測(cè)試的配置文件
- README.md：說(shuō)明文件
-
tslint.json：tslin的配置文件（定義TypeScript代碼質(zhì)量檢查的規(guī)則）
src目錄 - app目錄：包含應(yīng)用程序的組件和模塊(代碼目錄)
（1）app.component.css ；app組件的樣式
（2）app.component.html 猴仑；app組件的展示頁(yè)面
（3）app.component.spec.ts审轮；測(cè)試文件
（4）app.component.ts；app組件的邏輯文件
（5）app.module.ts辽俗；這個(gè)文件表示模塊疾渣；Angular 模塊是一個(gè)帶有 @NgModule 裝飾器的類，它接收一個(gè)用來(lái)描述模塊屬性的元數(shù)據(jù)對(duì)象
幾個(gè)重要的屬性如下：
declarations （聲明） - 視圖類屬于這個(gè)模塊崖飘。 Angular 有三種類型的視圖類： 組件 榴捡、 指令 和 管道 。
exports - 聲明（ declaration ）的子集朱浴，可用于其它模塊中的組件模板 吊圾。
imports - 本模塊組件模板中需要由其它導(dǎo)出類的模塊。
providers - 服務(wù)的創(chuàng)建者翰蠢。本模塊把它們加入全局的服務(wù)表中项乒，讓它們?cè)趹?yīng)用中的任何部分都可被訪問(wèn)到。
bootstrap - 應(yīng)用的主視圖梁沧，稱為根組件檀何，它是所有其它應(yīng)用視圖的宿主。只有根模塊需要設(shè)置 bootstrap 屬性中廷支。
- environment目錄：環(huán)境配置频鉴。Angular是支持多環(huán)境開(kāi)發(fā)的（可在不同的環(huán)境下，共用一套代碼）
- assets目錄：資源目錄酥泞，存儲(chǔ)靜態(tài)資源（如照片）
- inde.html：整個(gè)應(yīng)用程序的根html（程序啟動(dòng)頁(yè)面）
- main.js：整個(gè)項(xiàng)目的入口點(diǎn)，Angular通過(guò)此文件啟動(dòng)項(xiàng)目
- polyfills.ts：導(dǎo)入一些必要的庫(kù)（為了兼容老版本）
- style.css：全局樣式表
- tsconfig.app.json：TypeScript編譯器的配置啃憎，添加第三方依賴時(shí)會(huì)修改此文件
- test.js：自動(dòng)化測(cè)試
- typings.d.ts：類型芝囤，第三方文件
7、項(xiàng)目啟動(dòng)
（1）在命令窗口：ng serve ；訪問(wèn)：localhost:4200
（2）借助WebStrom悯姊。npm工具-->start羡藐；訪問(wèn)：localhost:4200
（3）還可以，如圖：
8悯许、新建組件
ng g component 組件名
創(chuàng)建新的組件仆嗦，并且更新app.module.ts中的文件：
然后就可以在product.component.html中寫(xiě)頁(yè)面了，但是Angular是一個(gè)單頁(yè)面應(yīng)用先壕，那么怎么吧product頁(yè)面顯示到頁(yè)面中的呢瘩扼，在product.component.ts文件中已經(jīng)定義了一個(gè)組件標(biāo)簽名app-product，然后把<app-product></app-product>寫(xiě)進(jìn)app.component.html中垃僚；
