開(kāi)篇廢話

這個(gè)Angular2 ,其實(shí)入門(mén)的教程已經(jīng)有很多很多人寫(xiě)過(guò)了，但，我覺(jué)得最好的仍然是官方的文檔。我英語(yǔ)一般般，看原檔比較吃力，是從Angular.cn這里開(kāi)始的。
寫(xiě)這篇的原因是想記錄一下入門(mén)過(guò)程中的一些坑，防止下次又遇到又得查半天。同時(shí)為了能給其他有緣人也看看，就寫(xiě)全一點(diǎn)吧。

開(kāi)發(fā)環(huán)境篇

1. angular2 依賴于node.js ，我電腦上安裝的node如下：

C:\Users\MidWong>node -v
v11.3.0

2、需要npm 包管理

C:\Users\MidWong>npm -v
6.4.1

Mac平臺(tái)可以用homebrew安裝nodejs，Windows平臺(tái)可用chocolatey, 在安裝nodejs時(shí)會(huì)安裝npm, 檢查即可。如果手動(dòng)安裝記得配置環(huán)境變量。

工具篇

1. 我用的WebStorm ,當(dāng)然這個(gè)沒(méi)限制，看個(gè)人習(xí)慣。vscode等一眾編輯器都可以。
2. 由于需要用到http請(qǐng)求，官方用mooc數(shù)據(jù)測(cè)試的，而我直接用Spring Boot搭了一個(gè)restfulAPI 服務(wù)端，mooc這一步略了。服務(wù)端的內(nèi)容不在本篇討論，有機(jī)會(huì)補(bǔ)充。Spring Boot真是神器啊，幾分鐘就能做出來(lái)一個(gè)簡(jiǎn)單的API接口。

準(zhǔn)備工作

安裝angular cli 。我把這個(gè)理解為模板了，不知道合不合適?？傊惭b之后，好多操作都可以用簡(jiǎn)單的命令來(lái)實(shí)現(xiàn)。

npm install -g @angular/cli

安裝完成之后，就可用ng命令來(lái)創(chuàng)建項(xiàng)目了。這一步操作，可以在終端（Windows上的命令提示符），也可以在編輯器里面的Terminal（也叫終端）里。

image.png

ng new 項(xiàng)目名稱

就可以創(chuàng)建一個(gè)angular項(xiàng)目了。這些步驟都可以參考文章開(kāi)頭的 Angular.cn 快速入門(mén)，寫(xiě)的更詳細(xì)。

我踩的坑

1. 創(chuàng)建組建后，不想要了

雖然有創(chuàng)建組建的命令，但是沒(méi)有刪除的呀！這時(shí)需要?jiǎng)h除組建文件夾/文件，然后在 app.module.ts 中刪除import。
這里贊一下WebStorm，刪了組建文件夾后，無(wú)用import的會(huì)有提示，選中刪除就ok.

2. ts語(yǔ)法

一開(kāi)始好不習(xí)慣這個(gè)“新語(yǔ)種”。但了解了它的由來(lái)后，一下就容易理解了。它是JavaScript的超集，因?yàn)镴avaScript沒(méi)有像諸多后端語(yǔ)言一樣強(qiáng)制類型，容易寫(xiě)，但也容易出現(xiàn)一些不容易發(fā)現(xiàn)的Bug。ts解決了這個(gè)問(wèn)題。在我看來(lái)，它就是用Java的語(yǔ)法寫(xiě)JavaScript。
怎么入門(mén)呢？我反正沒(méi)去單獨(dú)的學(xué)它，就只是看angular官網(wǎng)的代碼，照貓畫(huà)虎，寫(xiě)著寫(xiě)著就會(huì)了。

3. WebStorm 中的紅色波浪線

好頭大哦！明明和官網(wǎng)上的代碼一模一樣，就算復(fù)制過(guò)來(lái)也有些下邊劃紅色波浪線提示這里出錯(cuò)。代碼也能正常運(yùn)行，憑啥報(bào)錯(cuò)呢？！ 終于偶然發(fā)現(xiàn)，Ctrl+Alt+K 格式化一下代碼，干干凈凈的頁(yè)面，真舒服了！WebStorm 有自己的格式要求，那些代碼里沒(méi)用的空格/換行，在編輯器里幫助我們更容易閱讀代碼。這樣挺好的，培養(yǎng)良好的編程習(xí)慣。

4. 內(nèi)網(wǎng)穿透

大部分時(shí)間調(diào)試用Chrome，偶爾需要在真機(jī)上測(cè)試下觸摸/滑動(dòng)是否正常，這時(shí)候需要用到內(nèi)網(wǎng)穿透工具了，如阿里釘釘內(nèi)網(wǎng)穿透工具。此時(shí)需要在 ng serve 后面加一個(gè)參數(shù) --disable-host-check

ng serve --disable-host-check

這樣啟動(dòng)后，控制臺(tái)會(huì)有個(gè)warning，忽略它，可以在手機(jī)上通過(guò)互聯(lián)網(wǎng)訪問(wèn)你的項(xiàng)目了，就不需要手機(jī)和電腦接入同一局域網(wǎng)這么麻煩啦。

5.項(xiàng)目結(jié)構(gòu)

這一部分我就不寫(xiě)這么快了，畢竟剛剛?cè)腴T(mén)，不知道什么樣的結(jié)構(gòu)是合理的。但是有一點(diǎn)能感受到的是，能用組建就用組建，然后組裝，這樣容易在其他地方復(fù)用。一些至負(fù)責(zé)數(shù)據(jù)處理的，例如http請(qǐng)求，盡量寫(xiě)成通用的服務(wù)，同樣為了方便以后重復(fù)使用。

6.UI框架

官方推薦的有兩個(gè)，一個(gè)是大名鼎鼎的Material Design，動(dòng)畫(huà)效果簡(jiǎn)直舒服的不要不要的，上手也很快。另一個(gè)是阿里的NG ZORRO，組件豐富，還有現(xiàn)成的ng-admin中后端解決方案。如果不太在意前端設(shè)計(jì)，只是想完成該有的功能，這個(gè)ng-admin很適合，完成度很好，只要按著你的需求去改就可以。

當(dāng)然，其他的前端UI框架也是可以用的，比如bootstrap，像傳統(tǒng)的html網(wǎng)頁(yè)里一樣，在index.html中引用即可。
jQuery這個(gè)庫(kù)，在html網(wǎng)頁(yè)里特別好用，但是在這，至少我覺(jué)得是無(wú)用武之地了。

7.跨域

Angular是個(gè)前端框架，勢(shì)必會(huì)前后端分離，此時(shí)會(huì)有跨域的問(wèn)題。前后端都可以去解決這個(gè)問(wèn)題，我選擇在Spring Boot里解決，只需要一個(gè)注解即可搞定

@CrossOrigin(origins = "http://example.com", maxAge = 3600)

在控制器上加這一句注解，把安全的域名寫(xiě)進(jìn)去。當(dāng)然也可以寫(xiě)*號(hào)，但是不推薦。

8.打包發(fā)布

打包命令如下：

ng build

這是項(xiàng)目文件夾中會(huì)多出一個(gè)dist文件夾，只需要把里邊的文件全部復(fù)制到tomcat中的webapps目錄下，就發(fā)布完成了。

然后，問(wèn)題來(lái)了。
首先，如果按照頁(yè)面目錄，訪問(wèn)下來(lái)看起來(lái)沒(méi)啥區(qū)別，但是在某個(gè)路由下刷新一下頁(yè)面就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}]
});

再訪問(wèn)時(shí)，會(huì)發(fā)現(xiàn)在tomcat的發(fā)布路徑后，會(huì)有個(gè)# 錨點(diǎn)，刷新不會(huì)404了

如果，此時(shí)去瀏覽器F12調(diào)試，到network 標(biāo)簽頁(yè)里觀察，清除緩存并強(qiáng)制刷新頁(yè)面（長(zhǎng)按地址欄前面的刷新），會(huì)看到加載的文件巨大，好幾M，體驗(yàn)不太好。
我的辦法是，打包時(shí)添加參數(shù)

ng build --prod --aot 

這樣，壓縮打包出來(lái)的文件一班會(huì)在1M以內(nèi)，訪問(wèn)快很多了。

總結(jié)

還沒(méi)到總結(jié)的時(shí)候，先挖個(gè)坑，這篇還需要回來(lái)修改/補(bǔ)充內(nèi)容的。