Angular2 項目店诗，我是這樣入門的

開篇廢話

這個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接口趾徽。

準(zhǔn)備工作

安裝angular cli 续滋。我把這個理解為模板了，不知道合不合適孵奶∑Ｗ茫總之安裝之后，好多操作都可以用簡單的命令來實現(xiàn)了袁。

npm install -g @angular/cli

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

我比較懶崭庸，喜歡在編輯器里打開Terminal來創(chuàng)建怀浆，不用cd到我要的文件夾了。

image.png

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 標(biāo)簽頁里觀察甩牺，清除緩存并強制刷新頁面（長按地址欄前面的刷新）蘑志，會看到加載的文件巨大，好幾M贬派，體驗不太好急但。
我的辦法是，打包時添加參數(shù)

ng build --prod --aot

這樣搞乏，壓縮打包出來的文件一班會在1M以內(nèi)波桩，訪問快很多了。

總結(jié)

還沒到總結(jié)的時候请敦，先挖個坑镐躲，這篇還需要回來修改/補充內(nèi)容的。

Angular2 項目凰萨，我是這樣入門的

Angular2 項目，我是這樣入門的