[筆記][Angular 2][Angular 4] 學習筆記00-緣起與開發環境建置

小喵藉由此篇,說明為何使用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的開發環境

Angular 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的點點滴滴,提供自己未來參考。

如果有錯誤或不足的地方,也懇請您留言,讓小喵補充上去,感恩唷~

 


以下是簽名:


Microsoft MVP
Visual Studio and Development Technologies
(2005~2019/6)