一、Angular 基礎
1. Angular 簡介
-
Angular 是什么？
-
基于 TypeScript 的前端框架（Google 維護）。
-
適用于構建單頁應用（SPA）。
-
-
核心特性
-
組件化架構
-
雙向數據綁定
-
依賴注入（DI）
-
模塊化設計（NgModule）
-
-
Angular vs AngularJS
-
Angular（2+）是完全重寫的版本，不兼容 AngularJS（1.x）。
-
2. 開發環境搭建
-
安裝工具
-
Node.js（LTS 版本）
-
Angular CLI：
npm install -g @angular/cli
-
-
創建項目
ng new my-app cd my-app ng serve -
項目結構
/src/app # 核心代碼/components/services/assets # 靜態資源index.html # 主入口
3. TypeScript 基礎
-
類型系統
-
基本類型：
string,?number,?boolean,?any -
接口（
interface） -
類（
class）
-
-
裝飾器（Decorators）
-
@Component,?@Injectable,?@Input,?@Output
-
二、Angular 核心概念
4. 組件（Components）
-
組件結構
@Component({selector: 'app-hello',templateUrl: './hello.component.html',styleUrls: ['./hello.component.css'] }) export class HelloComponent {name = 'Angular'; } -
模板語法
-
插值：
{{ name }} -
屬性綁定：
[property]="value" -
事件綁定：
(event)="handler()"
-
-
生命周期鉤子
-
ngOnInit,?ngOnDestroy,?ngAfterViewInit?等
-
5. 指令（Directives）
-
內置指令
-
*ngIf（條件渲染） -
*ngFor（循環渲染） -
[ngClass],?[ngStyle]（動態樣式）
-
-
自定義指令
-
@Directive?裝飾器
-
6. 數據綁定
-
單向綁定
-
屬性綁定：
[value]="data" -
事件綁定：
(click)="onClick()"
-
-
雙向綁定
-
[(ngModel)]（需導入?FormsModule）
-
7. 服務與依賴注入（DI）
-
創建服務
@Injectable({providedIn: 'root' // 全局單例 }) export class DataService {getData() { return [1, 2, 3]; } } -
依賴注入
constructor(private dataService: DataService) {}
8. 路由（Routing）
-
配置路由
const routes: Routes = [{ path: 'home', component: HomeComponent },{ path: 'about', component: AboutComponent } ]; -
路由導航
-
<router-outlet>（占位符） -
routerLink（鏈接跳轉） -
Router.navigate()（編程式導航）
-
三、Angular 進階
9. 表單處理
-
模板驅動表單
-
NgModel，NgForm
-
-
響應式表單
-
FormGroup,?FormControl -
Validators（表單驗證）
-
10. HTTP 通信
-
HttpClient
constructor(private http: HttpClient) {} getUsers() {return this.http.get<User[]>('/api/users'); } -
攔截器（Interceptors）
-
全局請求/響應處理
-
11. 狀態管理
-
RxJS
-
Observable,?Subject -
操作符：
map,?filter,?debounceTime
-
-
NgRx（Redux 風格）
-
Store,?Actions,?Reducers
-
12. 性能優化
-
變更檢測策略
-
ChangeDetectionStrategy.OnPush
-
-
懶加載模塊
{ path: 'admin', loadChildren: () => import('./admin.module') } -
AOT 編譯（Ahead-of-Time）
-
提升運行時性能
-
四、Angular 高級
13. 國際化（i18n）
-
ng xi18n?提取翻譯文本 -
多語言切換
14. 測試
-
單元測試
-
Jasmine + Karma
-
TestBed（ Angular 測試工具）
-
-
E2E 測試
-
Protractor（已棄用，推薦 Cypress）
-
15. 部署
-
生產構建
ng build --prod -
Docker 部署
FROM nginx COPY dist/my-app /usr/share/nginx/html
五、學習路線建議
1. 初級階段（1-2 個月）
-
TypeScript 基礎
-
Angular 組件 & 數據綁定
-
路由 & HTTP 請求
2. 中級階段（2-4 個月）
-
響應式表單
-
RxJS 異步編程
-
狀態管理（NgRx）
3. 高級階段（4-6 個月）
-
性能優化（懶加載、AOT）
-
自定義指令/管道
-
微前端架構（Angular Elements）
4. 實戰項目
-
初級：Todo List（CRUD 操作）
-
中級：電商網站（購物車、路由守衛）
-
高級：管理后臺（NgRx、權限控制）
通過這個知識框架，你可以逐步掌握 Angular 的核心技術，并進階到企業級開發。建議結合?Angular 官方文檔?和實戰項目練習！
