Learning Angular - Third Edition Section 3 note

 Learning Angular - Third Edition Section 3 note

1. An Angular application must set the base HTML tag in the index.html file to enable pushState routing.

2.

a typical example of AppComponent is the following:

<app-header></app-header>

<router-outlet></router-outlet>

<app-footer></app-footer>

3.

ng generate module heroes --routing

The --routing parameter instructs the Angular CLI to create a routing module along with the heroes feature module.

4.

The order that we import routing modules in does matter. The router selects a route with a first match wins strategy. 

5. set default path

{ path: '', redirectTo: '/heroes', pathMatch: 'full' }

It is worth noting that we added the empty route path after all other routes because, as we have already learned, the order of the routes is important. We want more specific routes before less specific ones.

{ path: 'hero/:id', component: HeroDetailComponent }

The colon character denotes that id is a route parameter. If a route has more than one parameter, we separate them with /. 

6.

<p>{{hero?.name}} works!</p>

The ? character that we have added to the hero property is called a safe navigation operator. It is used to guard our component against null or undefined values of the hero property. If we do not use this operator, the delay that we experience because of the HTTP request will break our template. 

6.

Template-driven forms are easy to set up and add to an Angular application, but they do not scale well.

Reactive forms are more robust when it comes to scaling and testing, and when they are not interacting with the change detection cycle.

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

7. 

password: new FormControl('', [

  Validators.required,

  Validators.minLength(6)

])

8. Angular material

import { MatDialogModule } from '@angular/material/dialog';