iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 1
2

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

先說說為什麼使用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來講吧


下一篇
Day 2 - Angular Cli建一個專案
系列文
三十天利用Angular與.net Core開發實戰一波32

尚未有邦友留言

立即登入留言