Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Modern Angular: Renovation for Your Applications

Modern Angular: Renovation for Your Applications

Manfred Steyer

October 17, 2023
Tweet

More Decks by Manfred Steyer

Other Decks in Programming

Transcript

  1. @ManfredSteyer
    Renovation for Your Applications
    ManfredSteyer

    View full-size slide

  2. @ManfredSteyer

    View full-size slide

  3. @ManfredSteyer
    Manfred Steyer

    View full-size slide

  4. @ManfredSteyer

    View full-size slide

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

    View full-size slide

  6. @ManfredSteyer
    @Component({
    standalone: true,
    imports: [
    […],
    FlightCardComponent,
    CityPipe,
    CityValidator,
    ],
    selector: 'flight-search',
    templateUrl: '…'
    })
    export class FlightSearchComponent {
    […]
    }

    View full-size slide

  7. @ManfredSteyer
    bootstrapApplication(AppComponent, {
    providers: [
    MyGlobalService,
    importProvidersFrom(LegacyModule),
    provideRouter(APP_ROUTES),
    ]
    });

    View full-size slide

  8. @ManfredSteyer

    View full-size slide

  9. @ManfredSteyer
    Free eBook
    ANGULARarchitects.io/standalone
    Standalone Components
    Download here:

    View full-size slide

  10. @ManfredSteyer

    View full-size slide

  11. @ManfredSteyer
    Signal
    as Producer
    4711
    Consumer
    read
    set
    notify
    4712

    View full-size slide

  12. @ManfredSteyer
    flights = signal([]);
    const flights = await this.flightService.findAsPromise(from, to);
    this.flights.set(flights);



    View full-size slide

  13. @ManfredSteyer

    View full-size slide

  14. @ManfredSteyer

    View full-size slide

  15. @ManfredSteyer
    @if
    @if(auth.userName) {
    Welcome {{auth.userName}}!
    }
    @else {
    Welcome!
    Please log in!
    }

    View full-size slide

  16. @ManfredSteyer
    @if
    @if(auth.userName) {
    Welcome {{auth.userName}}!
    }
    @else if(auth.trial) {
    Welcome to this trial version!
    Please sign up to get the full version!
    }
    @else {
    Welcome!
    Please log in!
    }

    View full-size slide

  17. @ManfredSteyer
    @for
    @for(f of flights; track f.id) {

    }

    View full-size slide

  18. @ManfredSteyer
    @for
    @for(f of flights; track f.id) {

    }
    @empty {
    No flights found!
    }

    View full-size slide

  19. @ManfredSteyer
    @defer
    @defer (on viewport) {

    }
    @placeholder {
    Placeholder
    }

    View full-size slide

  20. @ManfredSteyer

    View full-size slide

  21. @ManfredSteyer
    d
    Slides & Examples Remote Company Workshops
    and Consulting
    http://angulararchitects.io

    View full-size slide