Category: Uncategorized
Node.JS Section 3: Module System
https://links.mead.io/nodecourse first import functions and assign it to an variable: const fs = require(‘fs’); functions: fs.writeFileSync(path, data) fs.appendFileSync(path, data) using npm packages: npm init : to initialize npm npm install packageName npm package: nodemon, which is like ng serve to monitor the changes of the code instantly.
Section 21 Dynamic Component
Recommend to use *ngIf to control the components already created However, you still can use programmatically create component, you have to create a component as type for the component factory using ComponentFactoryResolver.resolveComponentFactory(component type – first step export class) to create a component factory (the argument is the component you have already create) create a helper
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: