為什么打算寫這些文章？
沒有為什么，只是為了學習Angular和更了解.Net Core等技術
需要用到的技術？
- 后端使用.Net Core 2.1 + EF Core 2.1 + Mysql 5.7 + Identity （不知道Identity算不算一個獨立的技術點）
- 前端主要使用的是Angular 6.x + Ant （出自阿里巴巴的一套angular開源組件庫）https://ng.ant.design/docs/introduce/zh
大綱
- 開發環境搭建
- Angular的使用姿勢
- ANT的使用姿勢
- .Net Core + EFCore + Mysql的使用姿勢
- Identity的使用姿勢
- 系統發布（Windows和Ubuntu的服務器環境配置，包括Https環境的配置）
以上大綱只是暫時性的，寫的過程中會隨時調整，以實際發布文章為主
開發環境的搭建
我記得我當年剛出來找工作的時候，整個前端圈子都流行JQuery，基本前端開發=JQuery+一堆插件，伴隨而生的也有一堆的UI庫（easy UI，bootstrap。。。等的）。
如今才四五年過去，JQuery在不面向搜索引擎的網站中，基本上很難看到身影了（老舊的系統除外），新的各種BS軟件基本選擇都是Vue Angular React這三個框架了（統稱前端三巨頭）。前端的開發方式也發生了翻天覆地的變化，從引入一個Script就開始操作dom寫邏輯的方式，變成了先安裝NodejS，然后開始引入各種npm包啊，啥構建工具啊，然后再開始編碼，再然后發布的時候，還要編譯一下。。。，剛開始我也覺得這種方式特別麻煩。就感覺脫了褲子放屁一樣。
但是沒辦法，大趨勢就是這樣。面對變化，我們只能去擁抱，去適應。真正了解過一段時間之后，才發現這么做確實是有道理的。個人感覺這是前端工程化的一個體現。JavaScript從腳本進化成為了真正的編程語言。（當然今天的豬腳不是JavaScript，而是它的超集TypeScript）
1.安裝NodeJS
NodeJs的安裝方式非常簡單。https://nodejs.org/en/
下載LTS版本的安裝包，一路Next就好了。
安裝好了，在命令行里面查看一下
確認這樣，應該沒問題，也許你們的版本號和我不一樣。我這個是之前安裝的，和最新版是有小差別，但是完全不影響使用
2.安裝Angular的包
2.1.首先全局安裝Angular
npm install -g @angular/cli
Angular官網要求Angular6.0必須在node 8.x 和 npm 5.x 以上的版本才能正常使用，更低的版本也許會出現N多問題。
安裝成功后，在命令行上運行 ng -v
如果出現這個東東，那么說明你成功的安裝了Angular的最新版
如果沒有出現這個東東，那么先重啟一下電腦。然后再看，還是不行的話，可以跳轉到第一步，連續重試三次，還是有問題，麻煩出門右轉Angular官網 https://angular.cn/guide/quickstart
2.2 創建一個Angular項目，並運行起來
隨便選擇一個電腦里面，你喜歡目錄（多次實踐，千萬不要選擇非英文的路徑，連C#也不行，必須純英文路徑，不然會有莫名錯誤），執行命令
ng new testapp //testapp可以自己寫你喜歡的名字，就是你的項目名
輸入angular創建目錄的命令后，按回車鍵，angular-cli會自動創建一個angular的模板，只需要一首歌的時間可以創建完成
如果是這樣的話，那么說明創建成功了，進入testapp的目錄 ，執行npm start ,然后這次估計要好幾首歌的時間才能運行起來了。。。（看你的網速決定。。。如果實在是不行，可以把Npm的數據源切換到淘寶的源上去，但是請千萬不要使用cnpm來替換npm，因為也會遇到莫名且搞不定的問題。。）
啟動成功后，在瀏覽器界面輸入 http://localhost:4200就可以看到Angular的默認界面了
到這里之后，說明Angular已經安裝成功了
2.3 安裝ANT 組件庫
在新版的NG cli里面提供了一個賊好用的命令 ng add 。。。。
恰好ant官方緊跟着就支持了。我們可以很方便的使用ng add ng-zorro-antd [options] 命令把ANT組件庫添加到我們新建的angular項目中
如果沒有報錯的話，那就npm install ng-zorro-antd一下 ,我公司電腦就不用走這一步，但是家里電腦需要走這一步，不然就報錯，不知道為啥，如果有知道的大佬可以指點一下
再次訪問localhost:4200 ,當當當當。。。就會看到下邊的這個圖標，那么說明你的ant安裝好了
3.創建asp.Net Mvc Core 的項目
記得升級你們的猥瑣死丟丟到最新版。。。不然Angular模板創建出來默認是4.x，是webpack的的模板，難用的一批。。。升級到最新版就是angular-cli的工程模板了。
3.1 創建工程
然后點擊確定。。。
3.2 點擊運行
第一次運行的時候，大家可以先泡一杯茶，然后打開抖音（此處廣告五毛），然后使勁的嗨一會兒。再回來估計都還沒運行起來。原因很簡單，第一次運行的時候，會下載默認工程里面的angular所引用的包，賊慢。。
等待了一陣之后，瀏覽器突然彈出來一個頁面
說明我們的.Net Core + Angular5.x的項目就搭建好了。。。
看到這里，某些細心的園友可能會覺得很無語。后面直接用猥瑣死丟丟創建項目就好了，為毛前面要折騰那么多沒卵用的東西？
因為Angular自帶的模板是Angular5.x，但是最新的angular已經6.x了，5升級到6，不是那么簡單。因為其中涉及到Rxjs的升級，還有angular的本身的一些API的升級，所以我打算把自己揣摩的方式告訴大家，當然大家也可以參照官方的升級文檔進行升級 https://update.angular.io。
3.3 如何簡單粗暴的升級Angular5.x到6.x
我剛開始學習的時候，先按照官方升級的指南升級的，爬了一堆坑，最后還是沒搞定。最后用兩個詞搞定了 ‘復制’->‘粘貼’
3.3.1 復制我們前面創建的ng+ant的前端工程文件
3.3.2 直接刪除掉.Net Core下的ClientApp下的全部文件
就這一堆東西，然后粘貼前端的工程文件到這里，
再然后就點擊運行，會成功看到之前運行成的Ant的界面，
這樣我們就成功把默認項目的5.x升級到6.x了
到這里呢，就算是已經搭建好了asp.net core mvc+angular6.x的開發環境
但是呢，本篇文章還沒有結束，我打算分享一些我個人開發SPA項目的一些小經驗（也或者說是小技巧）
- 寫angular的程序，盡量使用vscode，猥瑣死丟丟寫TypeScript的體驗真的比不上vscode（個人感覺）
- 在后台運行一個ps1界面，使用npm start 增量編譯Angular,可以不用每次修改后，都等一首歌的時間才能看到效果
- 開發環境下，使用UseProxyToSpaDevelopmentServer("http://localhost:4200");替換UseAngularCliServer(npmScript: "start");，這樣可以極大提高工作效率。
- 如果有願意一起交流的大佬，可以加我們的qq群：80669150 ,可吹水，可斗圖，可學習