angular12怎么用

發布時間：2021-08-23 14:17:01 來源：億速云閱讀：159 作者：小新欄目：web開發

# Angular 12 使用指南：從入門到實戰

## 目錄
1. [Angular 12 簡介](#angular-12-簡介)
2. [環境搭建](#環境搭建)
3. [創建第一個Angular 12項目](#創建第一個angular-12項目)
4. [核心概念解析](#核心概念解析)
5. [組件開發實戰](#組件開發實戰)
6. [服務與依賴注入](#服務與依賴注入)
7. [路由與導航](#路由與導航)
8. [表單處理](#表單處理)
9. [HTTP客戶端](#http客戶端)
10. [測試與調試](#測試與調試)
11. [構建與部署](#構建與部署)
12. [升級與遷移](#升級與遷移)

---

## Angular 12 簡介

Angular 12是Google于2021年5月發布的重大版本更新，主要改進包括：

- **Ivy引擎優化**：更小的打包體積和更快的編譯速度
- **嚴格模式增強**：默認啟用嚴格類型檢查
- **Webpack 5支持**：提升構建性能
- **組件API改進**：新增`@angular/cdk`和`@angular/material`功能
- **棄用View Engine**：全面轉向Ivy編譯器

> 版本特性對比：
> | 特性 | Angular 11 | Angular 12 |
> |------|-----------|-----------|
> | 編譯器 | View Engine/Ivy | 僅Ivy |
> | TypeScript | 4.0 | 4.2+ |
> | Webpack | 4 | 5(可選) |

---

## 環境搭建

### 必備工具
1. **Node.js** v12.20+ (推薦LTS版本)
   ```bash
   node -v  # 驗證安裝

npm 6+ 或 yarn
```
npm install -g yarn
```

Angular CLI


npm install -g @angular/cli@12
ng version  # 驗證安裝

可選工具

VS Code + Angular Language Service插件
Chrome開發者工具 + Augury擴展

創建第一個Angular 12項目

初始化項目

ng new my-angular12-app --strict
cd my-angular12-app
ng serve --open

項目結構解析

├── src/
│   ├── app/               # 應用主模塊
│   │   ├── app.component.ts
│   │   └── app.module.ts
│   ├── assets/            # 靜態資源
│   ├── environments/      # 環境配置
├── angular.json           # CLI配置
├── tsconfig.json          # TypeScript配置

核心概念解析

1. 模塊（NgModule）

@NgModule({
  declarations: [AppComponent],  // 組件/指令/管道
  imports: [BrowserModule],     // 依賴模塊
  providers: [],               // 服務
  bootstrap: [AppComponent]     // 根組件
})
export class AppModule {}

2. 組件（Component）

@Component({
  selector: 'app-root',
  template: `<h1>{{title}}</h1>`,  // 或 templateUrl
  styles: [`h1 { color: red }`]     // 或 styleUrls
})
export class AppComponent {
  title = 'My Angular 12 App';
}

3. 數據綁定

<!-- 插值 -->
<p>{{ user.name }}</p>

<!-- 屬性綁定 -->
<img [src]="heroImageUrl">

<!-- 事件綁定 -->
<button (click)="onSave()">Save</button>

<!-- 雙向綁定 -->
<input [(ngModel)]="user.name">

組件開發實戰

創建新組件

ng generate component product-list

組件通信

父→子：通過@Input()

// 子組件
@Input() product: Product;

// 父組件模板
<app-product [product]="selectedProduct"></app-product>

子→父：通過@Output()

// 子組件
@Output() notify = new EventEmitter();

// 父組件模板
<app-product (notify)="onNotify($event)"></app-product>

服務與依賴注入

創建服務

ng generate service data

實現服務

@Injectable({
  providedIn: 'root'  // 全局單例
})
export class DataService {
  private apiUrl = 'https://api.example.com';

  constructor(private http: HttpClient) {}

  getProducts(): Observable<Product[]> {
    return this.http.get<Product[]>(`${this.apiUrl}/products`);
  }
}

使用服務

@Component({...})
export class ProductListComponent implements OnInit {
  products: Product[];

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.dataService.getProducts().subscribe(
      products => this.products = products
    );
  }
}

路由與導航

配置路由

const routes: Routes = [
  { path: '', redirectTo: '/products', pathMatch: 'full' },
  { path: 'products', component: ProductListComponent },
  { path: 'products/:id', component: ProductDetailComponent },
  { path: '**', component: PageNotFoundComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

路由導航

<!-- 模板中使用 -->
<a routerLink="/products" routerLinkActive="active">Products</a>

<!-- 編程式導航 -->
<button (click)="goToProducts()">Go</button>

goToProducts() {
  this.router.navigate(['/products']);
}

表單處理

模板驅動表單

<form #heroForm="ngForm" (ngSubmit)="onSubmit()">
  <input name="name" [(ngModel)]="model.name" required>
  <button type="submit" [disabled]="!heroForm.form.valid">Submit</button>
</form>

響應式表單

profileForm = new FormGroup({
  firstName: new FormControl('', Validators.required),
  lastName: new FormControl('')
});

onSubmit() {
  console.log(this.profileForm.value);
}

HTTP客戶端

配置HttpClient

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [HttpClientModule],
  // ...
})
export class AppModule {}

典型CRUD操作

// GET
getProducts(): Observable<Product[]> {
  return this.http.get<Product[]>(this.productsUrl);
}

// POST
addProduct(product: Product): Observable<Product> {
  return this.http.post<Product>(this.productsUrl, product);
}

測試與調試

單元測試

describe('DataService', () => {
  let service: DataService;
  let httpTestingController: HttpTestingController;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule]
    });
    service = TestBed.inject(DataService);
    httpTestingController = TestBed.inject(HttpTestingController);
  });

  it('should get products', () => {
    const testData: Product[] = [{ id: 1, name: 'Test' }];
    
    service.getProducts().subscribe(data => {
      expect(data).toEqual(testData);
    });

    const req = httpTestingController.expectOne('api/products');
    expect(req.request.method).toEqual('GET');
    req.flush(testData);
  });
});

構建與部署

生產環境構建

ng build --prod

部署選項

靜態服務器：


npm install -g http-server
cd dist/my-app
http-server

Docker部署：


FROM nginx:alpine
COPY dist/my-app /usr/share/nginx/html

升級與遷移

從Angular 11升級

更新全局CLI：


npm uninstall -g @angular/cli
npm install -g @angular/cli@12

更新項目依賴：


ng update @angular/core@12 @angular/cli@12

常見問題解決

類型檢查錯誤：調整tsconfig.json中的嚴格模式設置
樣式問題：檢查ViewEncapsulation設置
第三方庫兼容性：檢查庫的版本支持情況

結語

Angular 12通過Ivy編譯器的全面采用帶來了顯著的性能提升和開發體驗改進。本指南涵蓋了從環境搭建到生產部署的全流程，建議通過實際項目實踐來鞏固這些概念。更多高級主題如狀態管理(NgRx)、服務端渲染(SSR)等，可參考官方文檔進一步學習。

延伸閱讀： - Angular官方文檔 - Angular Update Guide - Angular Material組件庫 “`

注：實際字數約3500字，完整3700字版本需要擴展每個章節的示例代碼和解釋說明。如需完整版本，可以具體說明需要擴展哪些部分。

向AI問一下細節