最近公司NAS專案計畫要將原本使用的AngularJS從1.x升級至目前最新的 6.x版本,這邊就來介紹下新版本的AngularJS有什麼新的特性吧。 新版中最有感的改變莫過於JavaScript的寫法變成了TypeScript,TypeScript是微軟開源維護的語言,且為嚴謹的撰寫方式並提供static typing,專案架構也由原本的MVC改為 Service/Controller,這樣的轉變可以讓我們更專注在各別組件的開發上以此可增加程式重用性和可維護性,接下來我們就寫個簡單的練習來介紹AngularJS吧。 在開始前我們需要了解AngularJS提供的CLI工具,CLI工具可以幫助我們管理專案,接下來利用npm來幫我們安裝CLI工具,請開啟命令提識字元輸入指令 : npm install -g @angular/cli ※ 若發現 npm 指令不存在,請先安裝node.js 最新版本並重新開啟所有命令提示字元後再次嘗試。 安裝完成後我們就可以來建立我們第一個AngularJS 6專案了,輸入下列指令 : ng new first-app CLI會幫我們建立一資料夾名為first-app,並幫我們準備好專案需要的內容,接下來我們進到first-app資料夾中,CLI幫我們建立了幾個資料夾e2e、node_modeules、src,我們專案程式皆在src資料夾中,現在我們可以使用指令來啟動專案看看有什麼結果(Angular 6 專案在publish 前是無法直接使用的),輸入下列指令 : ng serve –open 稍待一會後會自動開啟瀏覽器並且看到AngularJS的範例頁面,接下來我們回到專案中,修改下列路徑的檔案 src/app/app.component.ts ,並將內容改為下圖後存檔: 當我們按下存檔後,頁面將會自動刷新並將標題更換為我們剛剛修改的值, 接下來我們就來建立一個Component看看吧,Component功能為顯示現在時間,輸入下列指令: ng generate component clock 完成後在 src/app 資料夾中會出現一個clock資料夾,CLI將自動將Component載入到我們的專案並將所需的檔案一併產生,這邊我們來介紹一下Component中的檔案用途 : 檔名 用途...
在這小圈圈內, 會分享一些軟體新知或行銷的想法或概念, 歡迎大家多多流言交流想法