已發布·持續改進
Framework · 2016 年發布
Angular 是由 Google 主導、以 TypeScript 為基礎的 Web 框架，內建路由、表單與 HTTP 通訊，適合打造大型且容易維護的 Web 應用程式。
Angular 是使用 TypeScript 開發 Web 應用程式的前端框架。它在 2016 年首次發布，由 Google 的 Angular 團隊以開源方式開發。雖然名稱相近，但它和 2010 年推出的 AngularJS 是不同的框架。畫面由範本與 TypeScript 類別組成的元件構成，會變化的狀態以訊號（signal）追蹤，共用邏輯則放在透過相依性注入（DI）提供的服務中共享。
路由器、表單、HttpClient、國際化與測試工具都以官方套件提供，因此 Angular 特別常見於需要多個團隊長期維護的大型企業應用程式與後台管理介面。一致的專案結構與程式碼產生工具讓各專案大同小異，新加入的開發者也能很快看懂程式碼。伺服器端轉譯（SSR）與靜態網站產生（SSG）也能用同一套工具完成。
最快的入門方式是先安裝 Node.js，再用 Angular CLI 建立專案，並以 ng serve 啟動開發伺服器。官方網站 angular.dev 提供可直接在瀏覽器中操作的互動式教學，以及依主題整理的詳細指南。Angular 程式碼由類別、型別與裝飾器組成，先熟悉 TypeScript 基礎會讓學習輕鬆許多。
每個元件透過 imports 直接匯入自己用到的元件與指令，不需要額外的模組，就能把畫面拆成小而獨立的單位。
用 signal、computed 與 effect 宣告狀態和衍生值，Angular 會精確追蹤哪些值改變，只更新受影響的部分。
路由器、響應式表單、HttpClient、國際化與伺服器端轉譯都是官方套件，不必花時間挑選核心函式庫。
Angular CLI 以一致的流程處理專案建立、程式碼產生、開發伺服器、測試與最佳化的正式環境建置。
Angular CLI 在 Node.js 上執行。請從 nodejs.org 安裝 LTS 版本，並確認 node 與 npm 能顯示版本號。支援的 Node.js 版本可在 angular.dev 的版本相容性表中查詢。
node --version && npm --version使用 npm 全域安裝 Angular CLI。安裝完成後即可使用 ng 指令，執行 ng version 可查看已安裝的版本。
npm install -g @angular/cli使用 ng new 建立新專案並啟動開發伺服器。回答樣式表格式與是否啟用 SSR 的問題後，瀏覽器會開啟 http://localhost:4200。
ng new my-app && cd my-app && ng serve --open@Component 裝飾器會把類別變成元件，也就是畫面的一部分。selector 是在 HTML 中使用的標籤名稱，範本中的 {{ }} 用來顯示值，(click) 則把事件繫結到方法。signal 像函式一樣呼叫即可讀取，並以 update 修改；值改變時，Angular 會自動更新畫面。
src/app/app.ts
import { Component, signal } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<h1>Hello, {{ name() }}!</h1>
<button (click)="increment()">Clicked {{ count() }} times</button>
`,
})
export class App {
protected readonly name = signal('Angular');
protected readonly count = signal(0);
increment() {
this.count.update((value) => value + 1);
}
}
npm install -g @angular/cli
ng new hello-angular
cd hello-angular
ng serve --open共六章，帶你從安裝一步步認識 Angular 的核心概念。
在這裡提問、分享經驗，交流關於 Angular 的看法。
還沒有討論。來發起第一則吧。
0 則留言
登入 · 登入後即可留言。
來留下第一則留言吧。