大家好，今天第一天，本系列文章主要會以實作後的心得筆記方式呈現

先說說為什麼使用Angular的由來，以本公司的角度來著墨

• 開發採用Typescript，寫法類似C#有物件導向的強行別開發語言，有別於Javascript
• 開發方式僅能依循Angular制定的框架所撰寫，團隊開發時比較不會偏離
• 前端元件可採用Angular Material，呈現出一致的畫面與風格
• Angular前端框架就已提供很多的獨立技術，如pipe、service worker等
• 前後端分離與團隊分工合作的效益能顯著提高
• 有Google這家公司在背後神支援與推廣

詳情也可參考我大神同事的心路歷程https://ithelp.ithome.com.tw/articles/10197955

先來講一下Angular與開發環境的安裝與設定

Angular近來持續成長，從最先的Angular.js到Angular2的砍掉重練，框架成熟度越來越高，有門檻但過了就過了，儼然成為業界前端框架新趨勢
根據保哥的文章https://blog.miniasp.com/post/2018/09/25/2018.aspx

Angular 本身就是一套完整的前端框架，而 React 與 Vue 只是個函式庫

小弟公司目前就導入Angular框架進行新系統的程式開發

Angular官網表示One framework Mobile & desktop

component、module、service、pipe.....的組成

開發工具介紹

Visual Studio Code

https://code.visualstudio.com/

• 支援多種程式語言語法
• 可以提供語法高亮度顯示，以及語法自動完成
• 各種程式碼管理的快捷鍵(keybindings.json)
• 程式碼檔案與資料夾的管理
• 除錯功能(debug)
• Git庫管理功能(TFS)
• 外掛擴充功能(Extensions)

簡稱VS CODE，小弟過去一開始用過webstorm、Atom，最後還是VS CODE最好用
又輕又快又好看且整合Terminal在裡面，且VS CODE的環境設定都是用json來管理
這裡分享一下本人的設定

Visual Studio Code Setting

這幾個預設json檔案會放在這

C:\Users\你的電腦名稱\AppData\Roaming\Code\User

• settings.json

editor.fontSize: 22 //字體大小
editor.formatOnSave: true //存檔時自動排版
terminal.integrated.shell.windows: “C:\\Windows\\system32\\cmd.exe“ //設定terminal為CMD
files.autoSave //自動儲存

• locale.json

我喜歡用英文版的VS CODE
	// 定義 VSCode 的顯示語言。
	// 如需支援的語言清單，請參閱 https://go.microsoft.com/fwlink/?LinkId=761051。
	// 改變設定值後需要重新啟動 VSCode.
	"locale": "en-US"

• keybindings.json

我在用的幾個快捷鍵可以這樣設定
  // Place your key bindings in this file to overwrite the defaults
  {
    "key": "ctrl+u",
    "command": "editor.action.transformToUppercase" //轉大寫
  },
  {
    "key": "ctrl+l",
    "command": "editor.action.transformToLowercase" //轉小寫
  },
  {
    "key": "ctrl+shift+s",
    "command": "workbench.action.files.saveAll" //save all file
  },
  {
    "key": "ctrl+k ctrl+d",
    "command": "editor.action.formatDocument", //幫你排好版
    "when": "editorTextFocus && !editorReadonly"
  }

Visual Studio Code Extensions

VS CODE有很多套件可以安裝，網路上也有相當多介紹
這裡唯一推薦安裝保哥的Angular Extension Pack
https://marketplace.visualstudio.com/items?itemName=doggy8088.angular-extension-pack#overview
他幫你整合很多個套件在一包，開發Angular這包就可以了

Node js & Npm

Angular會用到npm來安裝package,所以就來安裝個node.js與NPM吧

• Node.js是JavaScript的伺服器執行環境
• NPM是套件相依性管理工具

直接點https://nodejs.org/en/
]
安裝完後可以在命令提是字元(cmd)以下command來檢查一下版本，小弟喜歡裝最新版

node -v

npm -v

需要更新node的話可以看這篇，有詳細介紹
http://eddychang.me/blog/javascript/58-nodes-update.html

接下來Angular cli建一個專案到Day2來講吧