使用 Standalone Component 來寫 Angular 吧！

1. Taipei
Mike Huang
多奇數位創意有限公司
使用 Standalone Component
來寫 Angular 吧！

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. 先回憶一下使用
＠NgModule 的感覺

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. @Component({
selector: 'app-root',
template: '<app-todo-list></app-todo-list>'
})
export class AppComponent { }
如何找到 <app-todo-list></app-todo-list> 元件？

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

8. Angular Standalone
Components / Directives / Pipes

9. Standalone Components / Directives / Pipes
● Angular 14 推出 Developer Preview
● Angular 15 正式宣告 stable
● 在 @Component、@Directive、＠Pipe 加上 standalone: true 即可！
● Standalone 程式本身即可用 imports: [] 匯入
○ 其他的 @NgModule
○ 其他的 Standalone 程式
● 有 @NgModule 的概念，但又不用管 @NgModule
● 更加直覺、簡單的開發方式
● 打包速度更快、產出檔案更小

10. @Component({
standalone: true,
selector: 'app-root',
...
})
export class AppComponent { }
• 加上 standalone: true 就對了！
• 在 @Directive / @Pipe 上一樣適用

11. @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

12. @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 了！

13. @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: [] 中

14. @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 抬頭就找到！

15. 需要什麼再匯入什麼
就。很。剛剛好。

16. 更多重點都在文件裡
https://angular.io/guide/standalone-components

17. DEMO

18. Resources
● 搶先體驗 Standalone Components / Directives / Pipes
● RFC: Standalone APIs
● Getting started with standalone components