開發(fā)工具
WebStorm
版本：2017.2.4 x64
1 概述
官方的新手教程主要分為8個部分烹棉，從簡單的環(huán)境搭建滥崩，到一個項目的基本組成怕品；從基礎(chǔ)到核心，雖然核心的知識在新手教程中并沒有太多的介紹易迹。如果能把官網(wǎng)這個新手教程能全部做一遍的話宰衙，基本就能看懂基于angular4的前端項目了，當(dāng)然睹欲，這個看懂只是說能看懂項目的結(jié)構(gòu)和功能供炼，不對項目復(fù)雜的設(shè)計和邏輯做評價。
2 收獲和總結(jié)
2.1 設(shè)置開發(fā)環(huán)境
請先安裝node 和 npm窘疮。 如果已經(jīng)安裝的袋哼，請檢查版本：
請先在終端/控制臺窗口中運行命令node -v和 npm -v， 來驗證一下你正在運行 node 6.9.x 和 npm 3.x.x 以上的版本闸衫。更老的版本可能會出現(xiàn)錯誤涛贯，更新的版本則沒問題。
然后全局安裝angular-CLi：
npm install -g @angular/cli
2.2 創(chuàng)建新項目
打開終端運行以下命令創(chuàng)建新項目：
ng new my-app
項目創(chuàng)建完成后請 cd 到my-app項目目錄下蔚出，運行下面的命令來下載一些依賴包
npm install
最后在命令行輸入：
npm start 或 npm start --open 或 ng serve
（以上命令都可啟動項目弟翘，--open是命令的參數(shù)，添加這個參數(shù)項目啟動后會自動調(diào)用瀏覽器訪問項目）
2.3 文件類型和用途
通過對新手教程的學(xué)習(xí)骄酗，發(fā)現(xiàn)教程里主要涉及的幾個文件類型分別為：
*.ts
*.css
*.html
其中我們最常見的就是.html和.css稀余，而.ts其實就是TypeScript的縮寫，而TypeScript是JavaScript的超集趋翻，項目構(gòu)建時它會被編譯為javaScript睛琳。
說完文件類型之后，我們來說一下兩種類型的文件以及官網(wǎng)對其的解釋：
app.component.{ts,html,css,spec.ts}
使用HTML模板、CSS樣式和單元測試定義AppComponent組件师骗。 它是根組件历等，隨著應(yīng)用的成長
它會成為一棵組件樹的根節(jié)點。
app.module.ts
定義AppModule辟癌，這個根模塊會告訴Angular如何組裝該應(yīng)用寒屯。 目前，它只聲明了AppComponent愿待。
稍后它還會聲明更多組件浩螺。
其中component是組件靴患，可以是被拆分為固定功能的小組件仍侥，也可以是整個頁面。你只需在其對應(yīng)的.ts文件中:
@Component({ selector: 'hero-search', })
你就可以在其他的html頁面使用<hero-search></hero-search>標(biāo)簽去引用它鸳君。這樣就可以重復(fù)的使用這些組件农渊，避免了重復(fù)的代碼。
而module模塊或颊，是項目中最重要的部分砸紊。app.module.ts是項目的根模塊，這里應(yīng)當(dāng)保持簡潔囱挑，具有特定功能的模塊都建議單獨抽離出來醉顽。把這些模塊和組件在app.module.ts中聲明即可。
2.4 命名規(guī)范
根據(jù)官方的建議平挑，組件游添、模塊分別以.component.xxx 和 .module.ts 結(jié)尾，對于文件名需要多個單詞時中間以 - 來間隔通熄。而對于類名與java的類名一樣唆涝，遵循駝峰命名規(guī)范。
3 其它問題
3.1 WebStorm的自動Import
在寫代碼時發(fā)現(xiàn)唇辨，利用alt+Enter去自動import依賴時的引入格式：
import {RouterModule, Routes} from '@angular/router';
而官方示例代碼的一如格式為：
import { RouterModule, Routes } from '@angular/router';
其實只是{}內(nèi)有無空格的問題廊酣，雖然對代碼沒有影響，但是格式不同統(tǒng)一總是感覺有點別扭赏枚，可能也是我強迫癥的原因吧亡驰。
3.2 項目的小BUG
按照官方的文檔完成項目后，基本功能都可以實現(xiàn)饿幅。但是我卻發(fā)現(xiàn)：當(dāng)你把英雄列表里的所有英雄全部刪除完之后隐解，再去新增英雄，結(jié)果無響應(yīng)诫睬， 控制臺也沒有錯誤日志煞茫。后來down下官方示例的代碼去運行，也是不行。本來想在前端debug的续徽，但是發(fā)現(xiàn)resource下都是ts文件蚓曼，并不是javaScript，好心塞钦扭。沒辦法追究根源也是個小遺憾吧纫版。
