@ManfredSteyerThe Angular Renaissance:Architectures with Modern AngularManfredSteyer
View Slide
@ManfredSteyer
@ManfredSteyerManfred Steyer
@ManfredSteyerNgModules + EcmaScript Modulesimport { 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 ModulesAngular Modules
@ManfredSteyer@Component({standalone: true,imports: [[…],FlightCardComponent,CityPipe,CityValidator,],selector: 'flight-search',templateUrl: '…'})export class FlightSearchComponent {[…]}
@ManfredSteyerIt looks like you want to useNgIfDirective and MyComponent.Shall I import it for you?
@ManfredSteyerSmall and Medium Apps:Folder per Feature
@ManfredSteyerYour Public APIs:Barrels// index.ts == Public APIexport *from './flight-booking.routes';
@ManfredSteyerMedium and Large Apps:Folder per Domain
@ManfredSteyerRestricting Access b/w Domains, etc.on a library basis
@ManfredSteyerRestricting Access b/w Domains, etc.on a folder basisCredits to:Rainer Hahnekamp,AngularArchitects@softarc/eslint-plugin-sheriff
@ManfredSteyerng g @angular/core:standalone
@ManfredSteyerbootstrapApplication(AppComponent, {providers: [[…]]});
@ManfredSteyerbootstrapApplication(AppComponent, {providers: [importProvidersFrom(HttpClientModule),importProvidersFrom(RouterModule.forRoot(APP_ROUTES)),]});
@ManfredSteyerbootstrapApplication(AppComponent, {providers: [provideHttpClient(),provideRouter(APP_ROUTES),]});
@ManfredSteyerbootstrapApplication(AppComponent, {providers: [provideHttpClient(withInterceptors([authInterceptor]),),provideRouter(APP_ROUTES,withPreloading(PreloadAllModules),withDebugTracing(),),]});
@ManfredSteyerbootstrapApplication(AppComponent, {providers: [provideLogger(loggerConfig),]});
@ManfredSteyerbootstrapApplication(AppComponent, {providers: [provideLogger(loggerConfig,withColor({ debug: 3 })),]});
@ManfredSteyerexport const APP_ROUTES: Routes = [[…]{path: 'flight-booking',canActivate: [() => inject(AuthService).isAuthenticated()],component: FlightBookingComponent},]
@ManfredSteyerexport const APP_ROUTES: Routes = [[…]{path: 'flight-booking',canActivate: [() => inject(AuthService).isAuthenticated()],resolve: {flights: () => inject(FlightService).findAll()},component: FlightBookingComponent},]
@ManfredSteyerexport const authInterceptor: HttpInterceptorFn = (req, next) => {[…]}
@ManfredSteyerbootstrapApplication(AppComponent, {providers: [provideHttpClient(withInterceptors([authInterceptor]),),]});
@ManfredSteyerbootstrapApplication(AppComponent, {providers: [provideLogger({level: LogLevel.DEBUG,appenders: [DefaultLogAppender],formatter: (level, cat, msg) => [level, cat, msg].join(';'),}),]});
@ManfredSteyerFree eBook (brand new)ANGULARarchitects.io/standaloneStandalone ComponentsDownload here:
@ManfredSteyerSignalas Producer4711Consumerreadsetnotify4712
@ManfredSteyerflights: Flight[] = [];const flights = await this.flightService.findAsPromise(from, to);this.flights = flights;
@ManfredSteyerflights = signal([]);const flights = await this.flightService.findAsPromise(from, to);this.flights.set(flights);
@ManfredSteyerFine-grainedand Zone-lessCDConvertible toObservablesand vice versa!No need tounsubscribe!No need toupdate code!
@ManfredSteyerModern Angular:LightweightArchitecturesStandaloneComponentsand APIsFunctional Services Signals
@ManfredSteyerdSlides & Examples Remote Company Workshopsand Consultinghttp://angulararchitects.io
manfredsteyer
iimokoy
murabayashi
shohata
hsawaji
shimabox
jrsaruo
lnit
ogiwarat
ivargrimstad
star_zero
hschwentner
vrallev
holman
shpigford
quramy
pedronauck
notwaldorf
addyosmani
jrom
lara
rasmusluckow
hursman
aarron
scottboms