Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

DevFest 2022 Taipei 使用 Standalone Component 來寫 Angular 吧!

Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige

Hier ansehen

1 von 18 Anzeige

Weitere Verwandte Inhalte

Aktuellste (20)

Anzeige

DevFest 2022 Taipei 使用 Standalone Component 來寫 Angular 吧!

  1. 1. Taipei Mike Huang 多奇數位創意有限公司 使用 Standalone Component 來寫 Angular 吧!
  2. 2. About Me ● Title ○ 多奇數位創意有限公司 ○ Angular GDE ○ Microsoft MVP ● Awards ○ 2018 iT 邦幫忙鐵人賽 冠軍 ○ 2019 iT 邦幫忙鐵人賽 優選 ○ 第 12 屆 iThome 鐵人賽 冠軍 ● 著作:打通 RxJS 任督二脈 https://github.com/wellwind https://www.facebook.com/fullstackledder https://fullstackladder.dev https://www.tenlong.com.tw/products/9789864348039
  3. 3. 先回憶一下使用 @NgModule 的感覺
  4. 4. @NgModule({ declarations: [ AppComponent, LayoutComponent ], imports: [ BrowserModule, AnotherModule, TodoListModule ], providers: [ ], bootstrap: [AppComponent] }) export class AppModule { } @NgModule({ declarations: [ TodoListComponent, TodoItemComponent, TodoTextPipe, TodoDoneDirective ], imports: [ CommonModule ], exports: [ TodoListComponent ] }) export class TodoListModule { }
  5. 5. @Component({ selector: 'app-root', template: '<app-todo-list></app-todo-list>' }) export class AppComponent { } 如何找到 <app-todo-list></app-todo-list> 元件?
  6. 6. @Component({ selector: 'app-root', template: '<app-todo-list></app-todo-list>' }) export class AppComponent { } 如何找到 <app-todo-list></app-todo-list> 元件? @NgModule({ declarations: [ AppComponent, LayoutComponent ], imports: [ BrowserModule, AnotherModule, TodoListModule ], providers: [ ], bootstrap: [AppComponent] }) export class AppModule { } 1 2 @NgModule({ declarations: [ TodoListComponent, TodoItemComponent, TodoTextPipe, TodoDoneDirective ], imports: [ CommonModule ], exports: [ TodoListComponent ] }) export class TodoListModule { } 3 4
  7. 7. Angular Standalone Components / Directives / Pipes
  8. 8. Standalone Components / Directives / Pipes ● Angular 14 推出 Developer Preview ● Angular 15 正式宣告 stable ● 在 @Component、@Directive、@Pipe 加上 standalone: true 即可! ● Standalone 程式本身即可用 imports: [] 匯入 ○ 其他的 @NgModule ○ 其他的 Standalone 程式 ● 有 @NgModule 的概念,但又不用管 @NgModule ● 更加直覺、簡單的開發方式 ● 打包速度更快、產出檔案更小
  9. 9. @Component({ standalone: true, selector: 'app-root', ... }) export class AppComponent { } • 加上 standalone: true 就對了! • 在 @Directive / @Pipe 上一樣適用
  10. 10. @Component({ standalone: true, selector: 'app-todo-list', imports: [ CommonModule ], template: ` <ul *ngFor="..."> <li>...</li> </ul> ` }) export class TodoListComponent { } @Component({ standalone: true, selector: 'app-root', ... }) export class AppComponent { } 準備一個 standalone component ng generate component [name] --standalone imports: [] 可加入其他 @NgModule
  11. 11. @Component({ standalone: true, selector: 'app-root', imports: [ NgIf TodoListComponent ], template: ` <app-todo-list> </app-todo-list> ` }) export class AppComponent { } @Component({ standalone: true, selector: 'app-todo-list', imports: [ CommonModule ], template: ` <ul *ngFor="..."> <li>...</li> </ul> ` }) export class TodoListComponent { } NgIf、NgFor 等 directives 現在也都是 standalone 了!
  12. 12. @Component({ standalone: true, selector: 'app-root', imports: [ TodoListComponent ], template: ` <app-todo-list> </app-todo-list> ` }) export class AppComponent { } @Component({ standalone: true, selector: 'app-todo-list', imports: [ CommonModule ], template: ` <ul *ngFor="..."> <li>...</li> </ul> ` }) export class TodoListComponent { } standalone component 可以放入 另外一個 standalone component 的 imoprts: [] 中
  13. 13. @Component({ standalone: true, selector: 'app-root', imports: [ NgIf, TodoListComponent ], template: ` <app-todo-list *ngIf="..."> </app-todo-list> ` }) export class AppComponent { } 如何找到 <app-todo-list></app-todo-list> 元件? 1 抬頭就找到!
  14. 14. 需要什麼再匯入什麼 就。很。剛剛好。
  15. 15. 更多重點都在文件裡 https://angular.io/guide/standalone-components
  16. 16. DEMO
  17. 17. Resources ● 搶先體驗 Standalone Components / Directives / Pipes ● RFC: Standalone APIs ● Getting started with standalone components

×