第一章前端網頁應用的利器Angular

用戶端開發的框架

開發者/發行年	JavaScript or TypeScript	市場占有率(名次)
Google/2010	Angular 2 之後轉向使用TypeScript	2
Facebook/2013	JavaScript	1
Evan You/2014	Vue3 計畫轉向使用TypeScript	3

認識 Angular Framework

前端開發平台，前身是 Angular JS (2009)
Google 開發出來的開放源 JavaScript 框架
Angular 2 之後採用TypeScript (from Microsoft)
採用MVC 模式、SPA (Single Page Application)
注入依賴
模組、組件與模板

從JavaScript 到 TypeScript

Angular 在2.0版之後採用 TypeScript (簡稱為 TS)
TS 是 JavaScript (JS) 的類別超集合，可編譯為純JavaScript
具備強型別、物件導向等特質
解決 JavaScript 諸如資料型別、命名空間...等問題
符合 ES6 (ECMA Script 6) 的規範

安裝 Angular Framework

Latest指定安裝版本(15)

npm install -g @angular/cli

npm install -g @angular/cli@15

-g 安裝全域套件
—save-dev 只安裝在目前專案

查驗版本查驗版本(縮寫)

ng version

ng v

建立 Angular 專案

ng new mod01 (1)

ng new [專案名稱]
- --help : 條列出參數說明
- --routing : 預設為 true，是否產出
- --style : 指定樣式表的類型，例如CSS
- --skip-tests (-S) : 為true，不會建立 spec.ts 測試檔
- --inline-style (-s) : 為true，component.ts 文件內部定義 css

執行 Angular 專案

ng serve -o (1)

ng serve <project>
- 建置應用程式並啟動專案，並根據程式的變更隨時重新建置
- <project> 可省略，省略時就是指建置目前資料夾的專案
- --help 說明
- —open (-o) 開啟 url 位置在預設瀏覽器
- —port 指定port位置，預設是4200
- —ssl 使用 https

建立多個專案工作區

同時開發多個專案，共用node_Module 資料夾

建立 workspace 放置多個專案

    ng new u2347ws —create-application false

Workspace中建立專案

cd u2347ws

ng g app mod01 -S -s

ng generate application [projectname]
- 在 workspace 的 “project” 子資料夾中建立新的應用程式
- —help：條列出參數說明
- —routing：預設為true，是否產生
- —style：指定樣式表的類型，例如css
- —skip-tests (-S)：為true，不會建立 spec.ts 測試檔
- —inline-style (-s)：為 true ，component.ts 文件內部定義 css

啟動順利

index.html

入口文件

Angular應用程式的入口文件，包含HTML結構。

main.ts

啟動腳本

Angular應用程式的JavaScript入口點，負責加載和啟動應用程式。

app.module.ts

主模組定義

主要模塊文件，定義應用程式中的模塊、組件、指令等。

app.component.ts

根組件定義

根組件，應用程式的主要組件。

app.component.html

根組件模板

根組件的HTML模板文件，用於定義根組件的外觀和佈局。

第一章 前端網頁應用的利器Angular