Author: zero2full
Section 20 Authentication
Check email sign up and login API: google, key words: “firebase authentication rest api” Check loading spinner: google, key words: “css loading spinner” (https://loading.io/css/) Base on the REST API documentation, set up endpoint, data body… rxjs operators: tap, take, exhaustMap BehaviorSubject: always keep the last nexted data save data to local storage: localStorage.setItem/getItem/removeItem HttpInterceptor: auto
Section 18 Http
The Anatomy of Http request Http Verb: GET, POST, PUT, PATCH… URL (API Endpoint): /posts/1 Http Header (metadata): {“content-type”: “application/Json”} Http Body (POST, PUT, PATCH): data need to be stored back end {title: “new post”} Set up backend database, using BaaS (Backend As A Service) Firebase. website: https://console.firebase.google.com HttpClientModule is need to be imported into
Section 17 Pipe
Documentation: https://angular.io/api?query=pipe use pipe in template: {{ something-want-to-transform | pipe-name}} Build your own pipe: create a file with name: name.pipe.ts @Pipe({name: ‘pipeName, [pure: false] }) export class PipeNamePipe implements PipeTransform { transform(value, param1, param2…) { return value.someTransform… } } declare Pipe in app.module.ts ( or where the component using this Pipe) If Pipe accepts arguments,
Section 15 Form – Reactive Angular form
In ts file, declare a property for the form, which type should be FormGroup: such as: signupForm: FormGroup; Initiate the form in ngOnInit() method: signupForm = new FormGroup({ propertyName1: new FormControl(defaultName, validator, validator), propertyName2: new FormControl(defaultName, Validators.required / [Validators.required, Validators.email, …], validator), …}); synchronize the form you create with the form in template binding the
Section 15 Form – Template-Drive Angular form
Template-Drive angular form ngSubmit is used as listener to handle submit In order to check form object automatically generated by Angular, you can use the following method: <form (ngSubmit) = “onSubmit(f) #f = “ngForm”> … </form> Assign “ngModel” for every form control to let Angular know this element is form control: <input type=”text” name=”name” ngModel>
Section 11 Guards
canActivate, canActivateChild, canDeactivate, resolve
Section 11 Router & Routing
Set up route: const routes: Routes = [ {path: ”, component: HomeComponent}, //localhost:4200/ {path: ‘aaa’, component: AaaComponent, //localhost:4200/aaa children: [ {path: ‘:id’, component: AaaSubComponent} //localhost:4200/aaa/abc(id is value) ]} , {path: ‘**’, redirectTo: ‘/’} ] import: RouterModule to app.module.ts file’s @NgModule({imports: [RouterModule.forRoot(routes)]}) You also can set up routing.module.ts file and then import to app.module.ts file
Section 11 Routing queryParams & fragment
Using routerLink method: <a [routerLink] = “[‘/sample’, 1, ‘test’]” [quetyParams] = “{product: ‘apple’, amount: 5}” [fragment] = “‘color’”> sample </a> the output URL is: localhost:4200/sample/1/test?product=apple&amount=5#color Using router.navigate() method: this.router.navigate([‘/sample’, 1, ‘test’], {queryParams: {product: ‘apple’, amount: 5}, fragment: ‘color’}); the output URL is: localhost:4200/sample/1/test?product=apple&amount=5#color for navigate() method, several arguments need to know this.route.navigate([‘address’], {queryParams:{key, value}, relateTo:
Section 11 Routing ActivatedRoute
ActivatedRoute service: snapshot property and snapshot.params property: activatiatedRoute.snapshot.params[‘param name’] params (Observable): activatedRoute.params.subscribe((param: Params) => {…} )
Section 11 Routing
In order to route different component, you have to set up router in the app.module.ts file const myRoutes: Routes = [ {path: ‘xxx’, component: ComponentName} ]; imports: […, RouterModule.forRoot(myRoutes)] <router-outlet>/</router-outlet> represents where should render the contents routerLink directive sets up the links, two methods can be use: (1) <a routerLink = “/address” (directly write the