0 penilaian0% menganggap dokumen ini bermanfaat (0 suara)
44 tayangan3 halaman
This document provides an overview of key concepts in Angular including:
1. Template and data binding which allows binding data and DOM events between components and templates.
2. Components and services - components define views and logic, services contain reusable business logic. Services are injected into components.
3. Pipes transform data for display.
4. Inputs and outputs allow passing data between parent and child components.
5. Routing enables navigation between views defined in routes configuration.
This document provides an overview of key concepts in Angular including:
1. Template and data binding which allows binding data and DOM events between components and templates.
2. Components and services - components define views and logic, services contain reusable business logic. Services are injected into components.
3. Pipes transform data for display.
4. Inputs and outputs allow passing data between parent and child components.
5. Routing enables navigation between views defined in routes configuration.
This document provides an overview of key concepts in Angular including:
1. Template and data binding which allows binding data and DOM events between components and templates.
2. Components and services - components define views and logic, services contain reusable business logic. Services are injected into components.
3. Pipes transform data for display.
4. Inputs and outputs allow passing data between parent and child components.
5. Routing enables navigation between views defined in routes configuration.
@Input() selected: boolean; path: '', @Output() selectedChange = redirectTo: 'home', Markup for routing new EventEmitter<boolean>(); pathMatch: 'full' }, <a routerLink="home"></a> select() { <a routerLink="flight-booking/flight-search"> this.selected = true; { this.selectedChange.next(this.selected); path: 'home', component: HomeComponent}, […] // trigger event when needed {path: 'flight-booking', <router-outlet></router-outlet> } deselect() { loadChildren: () => // lazy loading this.selected = false; import('./flight-booking/flight-booking.module') this.selectedChange.next(this.selected); .then(m => m.FlightBookingModule)}, } {path: '**', } redirectTo: 'home'} ]; Routing config with Reading routing parameter Lifecycle Hooks parameter @Component({ @NgModule({ export const FLIGHT_BOOKING_ROUTES: Routes = [ selector: 'app-flight-edit', imports: [ […] templateUrl: './flight-edit.component.html',}) CommonModule, { export class FlightEditComponent implements OnInit { FormsModule, path: 'flight-edit/:id', id: string; SharedModule, // just for parameters in url segments showDetails: string; […]], // you don’t need to register other url params declarations: [ component: FlightEditComponent constructor(private route: ActivatedRoute) { } // ActivatedRoute represents the current route FlightSearchComponent, } FlightCardComponent, // including parameter ]; PassengerSearchComponent, ngOnInit() { this.route.params.subscribe(p => { FlightEditComponent], this.id = p['id']; providers: [ // from url segment as configured // Providers are global! this.showDetails = p['showDetails']; // Traditional way for registering a service Link with routing parameter // url parameter // Alternative to { providedIn: 'root' } }); { provide: FlightService, useClass: FlightService } <a [routerLink]= // Alternative, when provide } "['/flight-booking/flight-edit', item.id, // and useClass points to same type: } // FlightService
Angular Cheat Sheet
{showDetails: true}]">Edit</a> ], exports: [ // Exports can be used in other modules // which are importing this module
Concept & Content by Manfred Steyer
ngOnChanges(changes: SimpleChanges): void { FlightSearchComponent] Lifecycle Hooks if (changes['item']) { }) // item changed export class FlightBookingModule { @Component({ } } selector: 'flight-card', } templateUrl: './flight-card.component.html' }) ngOnDestroy(): void { export class FlightCardComponent […] Manfred Steyer is a Trainer and Consultant with a implements OnInit, OnChanges, OnDestroy { } focus on Angular. He is a Google Developer Expert (GDE) who writes for O’Reilly, Java Magazin, win- ngOnInit() { […] dows.developer, and Heise. He regularly speaks at conferences. […] } } Web: www.softwarearchitekt.at