Lightweight Architectures With Angular's Latest Innovations

Transcript

1. @ManfredSteyer Lightweight Architectures With Angular's Latest Innovations ManfredSteyer
2. @ManfredSteyer
3. @ManfredSteyer
4. @ManfredSteyer
5. @ManfredSteyer
6. @ManfredSteyer
7. @ManfredSteyer Manfred Steyer
8. @ManfredSteyer
9. @ManfredSteyer NgModules + EcmaScript Modules import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; […] @NgModule({ imports: [BrowserModule, OtherModule], declarations: [AppComponent, OtherComponent, OtherDirective], providers: [], bootstrap: [AppComponent], }) export class AppModule {} TypeScript Modules Angular Modules
10. @ManfredSteyer @Component({ standalone: true, imports: [ […], FlightCardComponent, CityPipe, CityValidator, ], selector: 'flight-search', templateUrl: '…' }) export class FlightSearchComponent { […] }
11. @ManfredSteyer @Component({ standalone: true, imports: [ […], FlightCardComponent, CityPipe, CityValidator, ], selector: 'flight-search', templateUrl: '…' }) export class FlightSearchComponent { […] }
12. @ManfredSteyer It looks like you want to use NgIfDirective and MyComponent. Shall I import it for you?
13. @ManfredSteyer
14. @ManfredSteyer
15. @ManfredSteyer Small and Medium Apps: Folder per Feature
16. @ManfredSteyer Small and Medium Apps: Folder per Feature // index.ts == Public API export * from './flight-booking.routes';
17. @ManfredSteyer Medium and Large Apps: Folder per Domain
18. @ManfredSteyer Restricting Access b/w Domains, etc. on a library basis
19. @ManfredSteyer Restricting Access b/w Domains, etc. on a folder basis Credits to: Rainer Hahnekamp, AngularArchitects Follow me for more information on this during the next weeks! @softarc/eslint-plugin-sheriff
20. @ManfredSteyer
21. @ManfredSteyer
22. @ManfredSteyer
23. @ManfredSteyer → @Component({ standalone: true, selector: 'app-root', imports: [ […] TicketsModule, ], templateUrl: '…' }) export class AppComponent { }
24. @ManfredSteyer → @Component({ standalone: true, selector: 'app-root', imports: [ […] TicketsModule, ], templateUrl: '…' }) export class AppComponent { }
25. @ManfredSteyer → @NgModule({ imports: [ FlightCardComponent, ], declarations: [ MyTicketsComponent ], }) export class TicketsModule { }
26. @ManfredSteyer → @NgModule({ imports: [ FlightCardComponent, ], declarations: [ MyTicketsComponent ], }) export class TicketsModule { }
27. @ManfredSteyer bootstrapApplication(AppComponent, { providers: [ MyGlobalService, importProvidersFrom(MyModule), ] });
28. @ManfredSteyer bootstrapApplication(AppComponent, { providers: [ MyGlobalService, importProvidersFrom(MyModule), ] });
29. @ManfredSteyer
30. @ManfredSteyer ng g @angular/core:standalone
31. @ManfredSteyer
32. @ManfredSteyer bootstrapApplication(AppComponent, { providers: [ provideHttpClient( withInterceptors([authInterceptor]), ), provideRouter(APP_ROUTES, withPreloading(PreloadAllModules), withDebugTracing(), ), ] });
33. @ManfredSteyer bootstrapApplication(AppComponent, { providers: [ provideLogger(loggerConfig), ] });
34. @ManfredSteyer bootstrapApplication(AppComponent, { providers: [ provideLogger(loggerConfig), ] });
35. @ManfredSteyer
36. @ManfredSteyer bootstrapApplication(AppComponent, { providers: [ provideLogger(loggerConfig), ] });
37. @ManfredSteyer
38. @ManfredSteyer
39. @ManfredSteyer export const APP_ROUTES: Routes = [ […] { path: 'flight-booking', canActivate: [() => inject(AuthService).isAuthenticated()], component: FlightBookingComponent }, ]
40. @ManfredSteyer export const APP_ROUTES: Routes = [ […] { path: 'flight-booking', canActivate: [() => inject(AuthService).isAuthenticated()], component: FlightBookingComponent }, ]
41. @ManfredSteyer export const APP_ROUTES: Routes = [ […] { path: 'flight-booking', canActivate: [() => inject(AuthService).isAuthenticated()], resolve: { flights: () => inject(FlightService).findAll() }, component: FlightBookingComponent }, ]
42. @ManfredSteyer export const authInterceptor: HttpInterceptorFn = (req, next) => { […] }
43. @ManfredSteyer bootstrapApplication(AppComponent, { providers: [ provideLogger({ level: LogLevel.DEBUG, appenders: [DefaultLogAppender], formatter: (level, cat, msg) => [level, cat, msg].join(';'), }), ] });
44. @ManfredSteyer Free eBook (brand new) ANGULARarchitects.io/standalone Standalone Components Download here:
45. @ManfredSteyer Modern Angular: Lightweight Architectures Standalone Components & Migration Scripts Standalone APIs Functional Services
46. @ManfredSteyer
47. @ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting http://angulararchitects.io