1梁剔、創(chuàng)建項(xiàng)目
（1）在命令窗口：ng new 項(xiàng)目名
（2）在WebStrom中File=>New=>project=>Angular CLI
比較慢虽画，需要耐心等待；
2荣病、新建組件（head和message）
- ng g component head
- ng g component message
3码撰、在app文件夾下會(huì)生成head文件夾和message文件夾
- 分別在head.component.html和message.component.html中寫(xiě)各自的html布局
- 分別在head.component.css和message.component.css中寫(xiě)各自的css樣式
在head.component.ts和message.component.ts中已經(jīng)分別定義了各自的組件標(biāo)簽名app-head和app-message，然后把這兩個(gè)標(biāo)簽寫(xiě)進(jìn)app.component.html中个盆，就可以顯示在head.component.html和message.component.html中寫(xiě)的內(nèi)容了
4脖岛、因?yàn)橄⒉皇谴_定的朵栖，是后臺(tái)給你的，要在message.component.ts文件中的得到數(shù)據(jù)柴梆，然后在渲染到頁(yè)面message.component.html陨溅。
message.component.ts文件里寫(xiě)代碼非常的嚴(yán)格（少個(gè)空格都會(huì)錯(cuò)，只能用單引號(hào)）绍在，可以在tslint.json文件里查找whitespace和quotemark：
修改設(shè)置
5门扇、路由
由于Angular是一個(gè)SPA（single page application）應(yīng)用，即主頁(yè)面只加載一次偿渡，不在刷新只是改變頁(yè)面上部分內(nèi)容的應(yīng)用悯嗓，又稱為單頁(yè)應(yīng)用。所以就用到了路由
- 新建組件（詳情頁(yè)面）
ng g component messagedetail - 需要在app.module.ts中配置路由信息卸察，如圖：
- 不同的路由展示不同的文件
（1）在app.component.html頁(yè)面寫(xiě)個(gè)a標(biāo)簽脯厨，點(diǎn)擊進(jìn)入詳情頁(yè)：
（2）在message.component.html頁(yè)面添加點(diǎn)擊事件，點(diǎn)擊進(jìn)入詳情頁(yè)：
當(dāng)我們點(diǎn)擊進(jìn)入詳情頁(yè)之后坑质，會(huì)在地址欄顯示localhost:4200/detail合武；我們可以直接在這拼上/dizhi，但有的我們沒(méi)有配置涡扼，就會(huì)什么也不顯示還會(huì)報(bào)錯(cuò)稼跳，是個(gè)不友好的體驗(yàn)，所以我們可以新建一個(gè)頁(yè)面吃沪，頁(yè)面丟失了
ng g component default
app.module.ts
6汤善、如何導(dǎo)入第三方庫(kù)(例導(dǎo)入jquery)
（1）第一步下載：
cnpm install jquery --save
--save是生產(chǎn)環(huán)境（上線之后叫生產(chǎn)環(huán)境）
--save-dev是開(kāi)發(fā)環(huán)境（上線之前叫開(kāi)發(fā)環(huán)境）
下載好之后：
在package.json中的"dependencies"中有'jquery'依賴
在node-modeles文件夾下有jquery包
（2）在angular.cli.json 文件中配置"scripts:[jquery.js的路徑]"
當(dāng)我關(guān)閉項(xiàng)目，在ng serve 的時(shí)候票彪，報(bào)錯(cuò)了红淡，打不開(kāi)，說(shuō)是找不到j(luò)query.js文件降铸，然后我改了一下這個(gè)路徑 ：../node_modules/jquery/dist/jquery.js 就可以了
（3）在核心組件app.component.ts中寫(xiě)jq代碼看支持不：答案是不可以的在旱，因?yàn)閖q是.js文件，這是.ts文件推掸；還需要下載轉(zhuǎn)一下：
cnpm install @type/jquery --save-dev
然后在tsconfig.app.json文件夾下桶蝎，設(shè)置一下"types":["jquery"]
好了，這樣就可以使用jq寫(xiě)代碼了谅畅；
7登渣、路由傳值（兩種方式）
（1）第一種方式
- 在app.module.ts中配置路由信息的時(shí)候，定一個(gè)參數(shù)：id毡泻；
- 在app.component.html中用routerLink傳值：
- 在messagedetail.component.ts中接收數(shù)據(jù)胜茧；
（2）第二種方式，點(diǎn)擊的時(shí)候動(dòng)態(tài)的傳值
- 在message.component.html中點(diǎn)擊事件中傳值牙捉；
- 在app.module.ts中配置路由信息的時(shí)候竹揍，定一個(gè)參數(shù)：title
- 在message.component.ts里的showDetail()方法中接收數(shù)據(jù)敬飒，傳給路由；
- 在messagdetail.component.ts中接收數(shù)據(jù)芬位，就可以在.html中展示數(shù)據(jù)无拗；
8、如何從服務(wù)器獲取數(shù)據(jù)
- 在app.module.ts里配置Http模塊
- 在assets文件下新建myData.json文件昧碉，設(shè)置數(shù)據(jù)英染，供下面使用，到實(shí)際開(kāi)發(fā)中被饿，這些數(shù)據(jù)都是后臺(tái)給的
- 在message.component.ts里獲取本地?cái)?shù)據(jù)四康；
