小喵藉由此篇，說明為何使用AngularJS 2作為開發Web的方式，並說明如何安裝開發環境
緣起
小喵個人從最早的ASP，後來轉為使用ASP.NET WebForm開發，而隨著開發的技術不斷演進，小喵也慢慢的要走向另外一個開發架構前進。而面對目前的Client端不斷演進，目前的前端使用者，再不侷限於Web的使用，前端可能是Web、可能是手機的App、可能是桌面的應用程式、也可能就只是Excel的VBA，因此小喵在思考未來合適的開發架構，勢必要把商業邏輯與Client端的使用，做一個切分。商業邏輯的部分，考量的是一個寫法，就能夠提供各式各樣Client端簡單容易的呼叫溝通，這部分『ASP.NET WebAPI』就決定是你了～至於Web的Client端，AngularJS 2相對於之前使用的AngularJS，效能上快上許多，如果未來要開發Hybrid App，相同或類似的經驗應該可以延續在App的開發中，因此，Web的開發就決定是你了『AngularJS 2』。
開發環境的準備
AngularJS 2.x與之前 AngularJS 1.x改變，真的可以用『天翻地覆』來形容，不只是語法上的不同，就連開發的環境，也與之前AngularJS 1.x有了很大的變化。之前在撰寫AngularJS，只要在專案中，透過nuget導入AngularJS的Library，就可以開始使用。但是在AngularJS 2.x，整個環境變成與之前不同，很多時候必須藉助 Command模式 以指令的方式來處理。因此，在開始開發AngularJS 2之前，首先要先建立合適的開發環境。
開發需要用到以下的環境：
- Visual Studio Code：免費且跨平台的開發工具，不只可以在Windows環境使用，用Mac的電腦，一樣可以使用Mac版的
- NodeJS：AngularJS是由Google所研發出來的，因此環境中，用到NodeJS也是很合理的
- Angular CLI：可以快速的建置專案，以及開發中所要產生的一些元素。
建置的過程，請參考以下保哥提供的這份，裡面十分清楚的講解如何建置AngularJS 2的開發環境
Proxy設定(Option)
有些公司的環境，是透過Proxy來連接Internet，而開發AngularJS 2時，許多時候必須下指令，透過網路，從Internet中下載安裝相關的套件，因此，以下特別說明如果環境中需要使用Proxy來連接，需要做哪些設定
Visual Studio Code的Proxy設定
檔案>喜好設定>使用者設定
這會開啟Visual Studio Code的settings.json這個檔案，請在{}中，加上如下的設定
// 要使用的 Proxy 設定。如果未設定，會從 http_proxy 與 https_proxy 環境變數取得設定。
"http.proxy": "http://您的Proxy為指:Port",
"https.proxy": "http://您的Proxy為指:Port",
// 是否應該針對提供的 CA 清單驗證 Proxy 伺服器憑證。
"http.proxyStrictSSL": false,
這樣，Visual Studio Code就能夠透過Proxy存取Internet的資源，在您參考保哥那份文件，要安裝「擴充套件」之時，如果沒辦法安裝，而您的環境必須是透過Proxy才能連上Internet的話，請先完成以上的設定，再安裝相關的「擴充套件」。
npm的Proxy設定
相同的，安裝完NodeJS之後，如果您的環境是必須透過Proxy才能夠連上Internet的話，那麼需要設定針對 npm 設定 Proxy，之後相關的東西才能夠透過npm安裝，npm的proxy設定方式如下：
npm config set https-proxy http://您的Proxy網址:您的Proxy Port
npm config set proxy http://您的Proxy網址:您的Proxy Port
npm config set strict-ssl false
設定Visual Studio Code的字型(Option)
以往，小喵會在Visual Studio中，設定使用使用Source Code Pro的字形，來避免一些英數類似的字混淆的狀況，如果您也有類似的需求，建議可以設定一下字形。一樣的，在：
檔案>喜好設定>使用者設定
在{}中，加上以下的設定
// 控制字型家族。
"editor.fontFamily": "Consolas, 'Source Code Pro', monospace",
// 控制字型寬度。
"editor.fontWeight": "normal",
// 控制字型大小 (以像素為單位)。
"editor.fontSize": 16,
字型的大小，可以依照自己的狀況去調整。
末記
建立好開發環境，是進入AngularJS 2開發的第一步，小喵筆記下來，也提供需要的人參考。接下來，小喵會筆記透過Angular-CLI來開發AngularJS 2的點點滴滴，提供自己未來參考。
如果有錯誤或不足的地方，也懇請您留言，讓小喵補充上去，感恩唷～
以下是簽名：
- 歡迎轉貼本站的文章，不過請在貼文主旨上加上【轉貼】，並在文章中附上本篇的超連結與站名【topcat姍舞之間的極度凝聚】，感恩大家的配合。
- 小喵大部分的文章會以小喵熟悉的語言VB.NET撰寫，如果您需要C#的Code，也許您可以試著用線上的工具進行轉換，這裡提供幾個參考
| Microsoft MVP Visual Studio and Development Technologies (2005~2019/6) | topcat Blog:http://www.dotblogs.com.tw/topcat |
