![@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 { }](https://image.slidesharecdn.com/study4-2023-standalone-angular-230413080719-b9389289/85/Standalone-Component-Angular-STUDY4-TW-2023-4-320.jpg)
![@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](https://image.slidesharecdn.com/study4-2023-standalone-angular-230413080719-b9389289/85/Standalone-Component-Angular-STUDY4-TW-2023-6-320.jpg)
![Standalone Components / Directives / Pipes
● Angular 14 推出 Developer Preview
● Angular 15 正式宣告 stable
● 在 @Component、@Directive、＠Pipe 加上 standalone: true 即可！
● Standalone 程式本身即可用 imports: [] 匯入
○ 其他的 @NgModule
○ 其他的 Standalone 程式
● 有 @NgModule 的概念，但又不用管 @NgModule
● 提供 CLI 工具快速轉換與產生程式
● 更加直覺、簡單的開發方式
● 打包速度更快、產出檔案更小](https://image.slidesharecdn.com/study4-2023-standalone-angular-230413080719-b9389289/85/Standalone-Component-Angular-STUDY4-TW-2023-9-320.jpg)
![@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](https://image.slidesharecdn.com/study4-2023-standalone-angular-230413080719-b9389289/85/Standalone-Component-Angular-STUDY4-TW-2023-11-320.jpg)
![@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 了！](https://image.slidesharecdn.com/study4-2023-standalone-angular-230413080719-b9389289/85/Standalone-Component-Angular-STUDY4-TW-2023-12-320.jpg)
![@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: [] 中](https://image.slidesharecdn.com/study4-2023-standalone-angular-230413080719-b9389289/85/Standalone-Component-Angular-STUDY4-TW-2023-13-320.jpg)
![@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 抬頭就找到！](https://image.slidesharecdn.com/study4-2023-standalone-angular-230413080719-b9389289/85/Standalone-Component-Angular-STUDY4-TW-2023-14-320.jpg)
More Related Content
What's hot (20)
Similar to 用 Standalone Component 來寫 Angular 吧！ - STUDY4.TW 2023 小聚 - 聊前端 (20)
![[GDG Kaohsiung DevFest 2023] 以 Compose 及 Kotlin Multiplatform 打造多平台應用程式](https://cdn.slidesharecdn.com/ss_thumbnails/building-multiplaftorm-application-using-kotlin-and-compose-multiplatform-231127165717-6bee7d0b-thumbnail.jpg?width=560&fit=bounds)
More from 升煌 黃 (12)
Recently uploaded (6)
用 Standalone Component 來寫 Angular 吧！ - STUDY4.TW 2023 小聚 - 聊前端
- 1. 使用 Standalone Component 來寫 Angular 吧！ Mike Huang 多奇數位創意有限公司
- 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
- 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 ● 提供 CLI 工具快速轉換與產生程式 ● 更加直覺、簡單的開發方式 ● 打包速度更快、產出檔案更小
- 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. 使用 Angular CLI 快速將專案轉換成 Standalone 重要：請將專案與 Angular CLI 都升級到 15.2.0 以上 ng generate @angular/core:standalone ? Convert all components, directives and pipes to standalone ? Remove unnecessary NgModule classes ? Bootstrap the application using standalone APIs ? 將所有 components, directives 和 pipes 轉換成 standalone ? 移除所有用不到的 NgModule 類別 ? 使用 standalone APIs 啟動應用程式
- 17. DEMO
- 18. Resources ● 搶先體驗 Standalone Components / Directives / Pipes ● RFC: Standalone APIs ● Getting started with standalone components