開篇廢話
這個Angular2 ,其實入門的教程已經(jīng)有很多很多人寫過了，但，我覺得最好的仍然是官方的文檔。我英語一般般，看原檔比較吃力，是從Angular.cn這里開始的。
寫這篇的原因是想記錄一下入門過程中的一些坑，防止下次又遇到又得查半天。同時為了能給其他有緣人也看看，就寫全一點吧。
開發(fā)環(huán)境篇
- angular2 依賴于node.js ，我電腦上安裝的node如下：
C:\Users\MidWong>node -v
v11.3.0
2、需要npm 包管理
C:\Users\MidWong>npm -v
6.4.1
Mac平臺可以用homebrew安裝nodejs，Windows平臺可用chocolatey, 在安裝nodejs時會安裝npm, 檢查即可。如果手動安裝記得配置環(huán)境變量。
工具篇
- 我用的WebStorm ,當(dāng)然這個沒限制，看個人習(xí)慣。vscode等一眾編輯器都可以。
- 由于需要用到http請求，官方用mooc數(shù)據(jù)測試的，而我直接用Spring Boot搭了一個restfulAPI 服務(wù)端，mooc這一步略了。服務(wù)端的內(nèi)容不在本篇討論，有機會補充。Spring Boot真是神器啊，幾分鐘就能做出來一個簡單的API接口。
準備工作
安裝angular cli 。我把這個理解為模板了，不知道合不合適。總之安裝之后，好多操作都可以用簡單的命令來實現(xiàn)。
npm install -g @angular/cli
安裝完成之后，就可用ng命令來創(chuàng)建項目了。這一步操作，可以在終端（Windows上的命令提示符），也可以在編輯器里面的Terminal（也叫終端）里。
ng new 項目名稱
就可以創(chuàng)建一個angular項目了。這些步驟都可以參考文章開頭的 Angular.cn 快速入門，寫的更詳細。
我踩的坑
1. 創(chuàng)建組建后，不想要了
雖然有創(chuàng)建組建的命令，但是沒有刪除的呀！這時需要刪除組建文件夾/文件，然后在 app.module.ts 中刪除import。
這里贊一下WebStorm，刪了組建文件夾后，無用import的會有提示，選中刪除就ok.
2. ts語法
一開始好不習(xí)慣這個“新語種”。但了解了它的由來后，一下就容易理解了。它是JavaScript的超集，因為JavaScript沒有像諸多后端語言一樣強制類型，容易寫，但也容易出現(xiàn)一些不容易發(fā)現(xiàn)的Bug。ts解決了這個問題。在我看來，它就是用Java的語法寫JavaScript。
怎么入門呢？我反正沒去單獨的學(xué)它，就只是看angular官網(wǎng)的代碼，照貓畫虎，寫著寫著就會了。
3. WebStorm 中的紅色波浪線
好頭大哦！明明和官網(wǎng)上的代碼一模一樣，就算復(fù)制過來也有些下邊劃紅色波浪線提示這里出錯。代碼也能正常運行，憑啥報錯呢？！ 終于偶然發(fā)現(xiàn)，Ctrl+Alt+K 格式化一下代碼，干干凈凈的頁面，真舒服了！WebStorm 有自己的格式要求，那些代碼里沒用的空格/換行，在編輯器里幫助我們更容易閱讀代碼。這樣挺好的，培養(yǎng)良好的編程習(xí)慣。
4. 內(nèi)網(wǎng)穿透
大部分時間調(diào)試用Chrome，偶爾需要在真機上測試下觸摸/滑動是否正常，這時候需要用到內(nèi)網(wǎng)穿透工具了，如阿里釘釘內(nèi)網(wǎng)穿透工具。此時需要在 ng serve 后面加一個參數(shù) --disable-host-check
ng serve --disable-host-check
這樣啟動后，控制臺會有個warning，忽略它，可以在手機上通過互聯(lián)網(wǎng)訪問你的項目了，就不需要手機和電腦接入同一局域網(wǎng)這么麻煩啦。
5.項目結(jié)構(gòu)
這一部分我就不寫這么快了，畢竟剛剛?cè)腴T，不知道什么樣的結(jié)構(gòu)是合理的。但是有一點能感受到的是，能用組建就用組建，然后組裝，這樣容易在其他地方復(fù)用。一些至負責(zé)數(shù)據(jù)處理的，例如http請求，盡量寫成通用的服務(wù)，同樣為了方便以后重復(fù)使用。
6.UI框架
官方推薦的有兩個，一個是大名鼎鼎的Material Design，動畫效果簡直舒服的不要不要的，上手也很快。另一個是阿里的NG ZORRO，組件豐富，還有現(xiàn)成的ng-admin中后端解決方案。如果不太在意前端設(shè)計，只是想完成該有的功能，這個ng-admin很適合，完成度很好，只要按著你的需求去改就可以。
當(dāng)然，其他的前端UI框架也是可以用的，比如bootstrap，像傳統(tǒng)的html網(wǎng)頁里一樣，在index.html中引用即可。
jQuery這個庫，在html網(wǎng)頁里特別好用，但是在這，至少我覺得是無用武之地了。
7.跨域
Angular是個前端框架，勢必會前后端分離，此時會有跨域的問題。前后端都可以去解決這個問題，我選擇在Spring Boot里解決，只需要一個注解即可搞定
@CrossOrigin(origins = "http://example.com", maxAge = 3600)
在控制器上加這一句注解，把安全的域名寫進去。當(dāng)然也可以寫*號，但是不推薦。
8.打包發(fā)布
打包命令如下：
ng build
這是項目文件夾中會多出一個dist文件夾，只需要把里邊的文件全部復(fù)制到tomcat中的webapps目錄下，就發(fā)布完成了。
然后，問題來了。
首先，如果按照頁面目錄，訪問下來看起來沒啥區(qū)別，但是在某個路由下刷新一下頁面就404了。解決方案是配置app.module.ts，添加這一行：
providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}]
像這樣：
import {HashLocationStrategy , LocationStrategy} from '@angular/common';
@NgModule({
declarations: [AppComponent],
bootstrap: [AppComponent],
imports: [BrowserModule, routes],
providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}]
});
再訪問時，會發(fā)現(xiàn)在tomcat的發(fā)布路徑后，會有個# 錨點，刷新不會404了
如果，此時去瀏覽器F12調(diào)試，到network 標簽頁里觀察，清除緩存并強制刷新頁面（長按地址欄前面的刷新），會看到加載的文件巨大，好幾M，體驗不太好。
我的辦法是，打包時添加參數(shù)
ng build --prod --aot
這樣，壓縮打包出來的文件一班會在1M以內(nèi)，訪問快很多了。
總結(jié)
還沒到總結(jié)的時候，先挖個坑，這篇還需要回來修改/補充內(nèi)容的。
