angular fundamentals.pdf

Angular Fundamentals Babel Coder

Components “A component controls a patch of screen real estate that we could call a view, and declares reusable UI building blocks for an application.” Babel Coder

Components import { Component } from '@angular/core'; @Component({ selector: 'app-hello', template: ` <p>Hello {{name}}</p> ` }) export class Hello { name: string; constructor() { this.name = 'World'; } } Metadata Hello World Babel Coder

Components Note List Note#3 Note#2 Note#1 Note#4 NoteForm Note#1 Note#2 Note#3 Note#4 Add Notes App Babel Coder

Component Glosary Bootstrap Process Root Module Declarations BrowserModule Components Selectors Templates Interpolation Input / Output and Event Handling Event Binding and Property Binding Safe Navigation Operator Babel Coder

Lifecycle Hooks lifecycle ngOnChanges ngOnInit ngDoCheck ngAfterContentInit ngAfterContentChecked ngAfterViewInit ngAfterViewChecked ngOnDestroy Babel Coder

Lifecycle Hooks ngOnChanges ngOnInit ngOnChanges set data-bound input propertirs After first displays and sets the component's input properties reset data-bound input propertirs Babel Coder

ngOnInit import { OnInit } from '@angular/core'; export class OnInitComponent implements OnInit { constructor() { // fetch API } ngOnInit() { // fetch API } } Babel Coder

ngOnChanges import { OnChanges, SimpleChanges } from '@angular/core'; export class OnChangesComponent implements OnChanges { constructor() { } ngOnChanges(changes: SimpleChanges) { } } Babel Coder

Directives Directives DOM DOM + A Directive modifies the DOM to change apperance, behavior or layout of DOM elements. Babel Coder

Directives Component: Directives + Template Structural Directives: Change the Dom Layout Attribute Directives: Change the appearance or behavior Babel Coder

structural directives NgFor NgIf NgSwitch Babel Coder

ngFor import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` <div *ngFor="let course of courses"> {{ course.title }} - {{ course.price }} Baht </div> ` }) export class AppComponent { courses = [ { title: 'Universal Angular2', price: 7500 }, { title: 'Advance JavaScript', price: 7500 }, { title: 'Fullstack JavaScript', price: 7500 } ] } Universal Angular2 - 7500 Baht Advance JavaScript - 7500 Baht Fullstack JavaScript - 7500 Baht

ngIf import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` <div *ngFor="let course of courses"> <div *ngIf="course.price <= 3000"> {{ course.title }} - {{ course.price }} Baht </div> </div> ` }) export class AppComponent { courses = [ { title: 'Universal Angular2', price: 7500 }, { title: 'Advance JavaScript', price: 7500 }, { title: 'Fullstack JavaScript', price: 7500 }, { title: 'Instant Angular2', price: 2950 }, ] } Instant Angular2 - 2950 Baht

ngSwitch import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` <div *ngIf="currentView === 'SHOW'">Show View</div> <div *ngIf="currentView === 'EDIT'">Edit View</div> <div *ngIf="currentView === 'CREATE'">Create View</div> <div *ngIf="currentView !== 'SHOW' && currentView !== 'EDIT' && currentView !== 'CREATE'"> Landing Page </div> ` }) export class AppComponent { currentView = 'SHOW'; } Babel Coder

ngSwitch import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` <div [ngSwitch]="currentView"> <div *ngSwitchCase="'SHOW'">Show View</div> <div *ngSwitchCase="'EDIT'">Edit View</div> <div *ngSwitchCase="'CREATE'">Create View</div> <div *ngSwitchDefault>Landing Page</div> </div> ` }) export class AppComponent { currentView = 'SHOW'; } Show View

Attribute Directives NgStyle NgClass Babel Coder

ngStyle @Component({ selector: 'bold-button', template: ` <button [ngStyle]="{ color: color, 'background-color': bgColor, fontWeight: 'bold' }"> <ng-content></ng-content> </button> ` }) export class DeleteButtonComponent { @Input() bgColor: string = 'red'; @Input() color: string = 'white'; } @Component({ selector: 'app-root', template: ` <bold-button bgColor="green"> Delete </bold-button> ` }) export class AppComponent { } Delete

Style @Component({ selector: 'app-root', template: ` <button [style.backgroundColor]="'green'">OK!</button> ` }) export class AppComponent { } Babel Coder

ngClass @Component({ selector: 'app-root', template: ` <button ngClass="btn btn-success">OK!</button> `, styles: [` .btn { padding: 6px 12px; line-height: 1.5; border: none; } .btn-success { color: #FFF; background-color: #449d44; } `] }) export class AppComponent { } Babel Coder

Services logging service data service message bus tax calculator application configuration

Services DI Framework Service Component 1. gets registered 2. declares dependency 3. injects the service Babel Coder

Services Dependency Registry Provider Injector registers resolves Token Dependency @NgModule({ providers: [ NoteService ], bootstrap: [AppComponent] }) constructor(private noteService: NoteService) {} Babel Coder

Services Injector Service A Service B Service C Service D Component constructor(private serviceA: ServiceA) {} Babel Coder private serviceA = inject(ServiceA) Component

Services @Injectable({ providedIn: 'root', }) export class LeaveService { http = inject(HttpClient); getLeaveList() { return this.http.get<LeaveItem[]>( `${import.meta.env.NG_APP_API_URL}/leaves` ); } } Babel Coder @Component({ selector: 'absence-management-leave-list', standalone: true, imports: [CommonModule, LeaveItemComponent], templateUrl: './leave-list.component.html', styleUrls: ['./leave-list.component.scss'], }) export class LeaveListComponent { leaveService = inject(LeaveService); leaveList$ = this.leaveService.getLeaveList(); } <div class="max-w-3xl mx-auto"> <h2 class="text-center text-green-700 text-3xl my-2">All Leaves</h2> <section class="grid grid-cols-3 gap-2"> <absence-management-leave-item *ngFor="let leave of leaveList$ | async" [leave]="leave" ></absence-management-leave-item> </section> </div> Service Component Component

Reactive Programming Babel Coder

let a = 1 let b = 2 let c = a + b // 3 a = 4 c = 3 c = 6 Babel Coder

reactive programming Reactive programming is a programming paradigm oriented around data flows and the propagation of change let a let b let c 1 2 3 4 5 3 7 9 Babel Coder

reactive programming RP Asynchronous Dataflow = + let a let b let c 1 2 3 4 5 3 7 9 Stream Babel Coder

reactive programming 1 Define the different streams 2 Define the operations + let a let b let c 1 2 3 4 5 3 7 9 Babel Coder

reactive programming It allows you to specify the dynamic behavior of a value completely at the time of creation. let a = 1 let b = 2 console.log(a * 2) console.log(b * 2) IMP let values$ = of(1, 2); let transform$ = values$.pipe(map(a => a * 2)); transform$.subscribe( value => console.log(value) ); RP Babel Coder

reactive programming Babel Coder

functional reactive programming FRP RP Functional = + let a let b 1 3 4 2 6 8 map / reduce / filter Babel Coder

RxJS ReactiveX An API for asynchronous programming with observable streams

stream A sequence of values over time. [0, 1, 2, 3, 4, 5] [(100, 120), (200, 199), (33, 71)] [ "b", "ba", "bab", "babel" ] Streams Operators + Babel Coder

observable Observables act as a blueprint for how we want to create streams, subscribe to them, react to new values, and combine streams together to build new ones. Observer Observable Stream Babel Coder

marble diagrams let streamA$ = interval(1000); let streamB$ = streamA$.pipe(map(a => a * 2)); streamB$.subscribe(console.log); 0 2 4 6 …

marble diagrams let streamA$ = interval(1000); let streamB$ = streamA$.pipe(map(a => a * 2)); /* streamA: ---0---1---2---3---4... map(a => 2 * a) streamB: ---0---2---4---6---8... */ streamB$.subscribe(value => console.log(value)); Babel Coder

Subscribing to Observables Babel Coder const subscription = interval(1_000).subscribe({ next: (v) => console.log(v), error: (err) => console.error(err), complete: () => console.log('completed!'), }); setTimeout(() => subscription.unsubscribe, 5_000); 0 1 2 3 4

map interval(1000) .pipe(map((v) => v * 2)) .subscribe((value) => console.log(value)); 0 2 4 ... Babel Coder

filter interval(1000) .pipe(filter((v) => v % 2 === 0)) .subscribe((value) => console.log(value)); 0 2 4 ... Babel Coder

merge const timer1 = interval(500).pipe(take(3)); const timer2 = interval(1000).pipe(take(3)); merge(timer1, timer2).subscribe((value) => console.log(value)); 0 1 0 2 1 2 Babel Coder

concat const timer1 = interval(500).pipe(take(3)); const timer2 = interval(1000).pipe(take(3)); concat(timer1, timer2).subscribe((value) => console.log(value)); 0 1 2 0 1 2 Babel Coder

mergeAll of(1, 2, 3) .pipe( map((v) => interval(500).pipe(take(v * 2))), mergeAll() ) .subscribe(console.log); Babel Coder

mergeMap of(1, 2, 3) .pipe(mergeMap((v) => interval(500).pipe(take(v * 2)))) .subscribe(console.log); Babel Coder

concatAll fromEvent(document, 'click') .pipe( map(() => interval(500).pipe(take(3))), concatAll() ) .subscribe((x) => console.log(x)); Babel Coder

switchMap interval(500) .pipe(take(3)) .pipe(switchMap((x) => of(x, x ** 2, x ** 3))) .subscribe((x) => console.log(x)); Babel Coder

combineLatest const firstTimer = timer(0, 1000).pipe(take(3)); const secondTimer = timer(500, 1000).pipe(take(3)); combineLatest([firstTimer, secondTimer]).subscribe((value) => console.log(value) ); Babel Coder

debounceTime fromEvent(document, 'click') .pipe( debounceTime(1000), map(() => 'x') ) .subscribe((x) => console.log(x)); Babel Coder

retry interval(100) .pipe( mergeMap((val) => (val > 5 ? throwError(() => 'Error!') : of(val))), retry(2) // retry 2 times on error ) .subscribe({ next: (value) => console.log(value), error: (err) => console.log(`${err}: Retried 2 times then quit!`), }); Babel Coder

distinctUntilChanged of(1, 1, 1, 2, 2, 2, 1, 1, 3, 3) .pipe(distinctUntilChanged()) .subscribe(console.log); 1 2 1 3 of({ x: 1, y: 1 }, { x: 1, y: 2 }, { x: 2, y: 2 }, { x: 3, y: 1 }) .pipe( distinctUntilChanged((prev, curr) => { return prev.x === curr.x || prev.y === curr.y; }) ) .subscribe(console.log); { x: 1, y: 1 } { x: 2, y: 2 } { x: 3, y: 1 } Babel Coder

Subject A Subject is like an Observable, but can multicast to many Observers. Subjects are like EventEmitters: they maintain a registry of many listeners. const subject = new Subject<number>(); subject.subscribe({ next: (v) => console.log(Òbserver A: ${v}`), }); subject.subscribe({ next: (v) => console.log(Òbserver B: ${v}`), }); subject.next(1); subject.next(2); subject.subscribe({ next: (v) => console.log(Òbserver C: ${v}`), }); subject.next(3); Observer A: 1 Observer B: 1 Observer A: 2 Observer B: 2 Observer A: 3 Observer B: 3 Observer C: 3 Babel Coder

BehaviorSubject BehaviorSubjects are useful for representing "values over time". const subject = new BehaviorSubject<number>(0); subject.subscribe({ next: (v) => console.log(Òbserver A: ${v}`), }); subject.subscribe({ next: (v) => console.log(Òbserver B: ${v}`), }); subject.next(1); subject.next(2); subject.subscribe({ next: (v) => console.log(Òbserver C: ${v}`), }); subject.next(3); Observer A: 0 Observer B: 0 Observer A: 1 Observer B: 1 Observer A: 2 Observer B: 2 Observer B: 2 Observer A: 3 Observer B: 3 Observer C: 3 Babel Coder

Example I: Type-ahead Suggestions const searchBox = document.getElementById('search-box') as HTMLInputElement; fromEvent(searchBox, 'input') .pipe( map((e) => (e.target as HTMLInputElement).value), filter((text) => text.length > 3), debounceTime(100), distinctUntilChanged(), switchMap((searchTerm) => ajax(`/api/endpoint?search=${searchTerm}`)) ) .subscribe((v) => console.log(v)); Babel Coder

Example II: Retry API Request ajax('/api/endpoint') .pipe(retry(2)) .subscribe((v) => console.log(v)); Babel Coder

Pipes Use pipes to transform strings, currency amounts, dates, and other data for display. Pipes are simple functions to use in template expressions to accept an input value and return a transformed value. Babel Coder

Using Pipes @Component({ selector: 'lowerupper-pipe', template: `<div> <label>Name: </label><input #name (keyup)="change(name.value)" type="text"> <p>In lowercase: <pre>'{{value | lowercase}}'</pre> <p>In uppercase: <pre>'{{value | uppercase}}'</pre> </div>` }) export class LowerUpperPipeComponent { value: string; change(value: string) { this.value = value; } } Babel Coder

Using Pipes @Component({ selector: 'slice-list-pipe', template: `<ul> <li *ngFor="let i of collection | slice:1:3">{{i}}</li> </ul>` }) export class SlicePipeListComponent { collection: string[] = ['a', 'b', 'c', 'd']; }

Built-in Pipes DatePipe CurrencyPipe DecimalPipe SlicePipe JsonPipe PercentPipe LowerPipe LowerCasePipe UpperCasePipe TitlePipe Etc

Custom Pipes import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'truncate' }) export class TruncatePipe implements PipeTransform { transform(value: any, maxLenght: string): string { return value.length > maxLenght ? value.slice(0, maxLenght) + '...' : value; } }

Form Design <form> <div class="form-group"> <label for="email">Email address</label> <input type="email" class="form-control" id="email" placeholder="Enter email"> </div> <div class="form-group"> <label for="password">Password</label> <input type="password" class="form-control" id="password" placeholder="Password"> </div> <button type="submit" class="btn btn-primary"> Submit </button> </form> FormGroup FromControl FromControl

Routing URL Router Route Component Babel Coder

/books Books Book1 Book2 Book3 Book4 Book#1 /books/1 /books/new /books/1/edit Babel Coder

const appRoutes: Routes = [ { path: 'books', component: BooksComponent, children: [ { path: '', component: BookListComponent }, { path: 'new', component: FormComponent }, { path: ':id', component: BookComponent } ] } ] Books App Babel Coder

const appRoutes: Routes = [ { path: 'books', component: BooksComponent, children: [ { path: '', component: BookListComponent }, { path: 'new', component: FormComponent }, { path: ':id', component: BookComponent, children: [ { path: 'edit', component: FormComponent } ] } ] } ] Books App Book Form Babel Coder

https://www.babelcoder.com/books/1/edit path Books <router-outlet> </router-outlet> Book <router-outlet> </router-outlet> Form

routerLink <a class="btn btn-secondary btn-sm" routerLink="/books/new">Create</a> <a class="nav-link" routerLinkActive="active" [routerLink]="['/books', book.id, 'details']">Content</a> <a class="nav-link" routerLinkActive="active" routerLinkActiveOptions="{ exact: true }" [routerLink]="['/']">Content</a> <a class="page-link" [routerLink]="['/books']" [queryParams]="{ page: page }"> {{ page }} </a> Babel Coder

ActivatedRoute this.route.snapshot this.route.paramMap ActivatedRouteSnapshot this.route.queryParamMap Observable … Babel Coder

ParamMap Book /books/1 /books/2 ngOnInit() { this.route.paramMap.subscribe( (params: ParamMap) => this.id = params.get(‘id’); ); } Babel Coder

CanActivate Guard navigate Babel Coder

CanDeactivate Guard navigate Babel Coder

REST Stands for “Representational State Transfer” RESTful Web Services are one way of providing interoperability between computer systems on the Internet. Babel Coder

Traditional Web Architectures Server Presentation Application Persistence Browser Babel Coder

Client / Server Internet Client Server

Uniform Interface User Article Comment URL /users GET POST PUT PATCH DELETE List All Users Create New User Babel Coder

Uniform Interface User Article Comment URL /users/1 HTML XML JSON text/html application/xml application/json Babel Coder

Stateless Internet Client Server User Article Comment Babel Coder

HTTP Status Codes CODE STATUS 1xx Informational responses 2xx Success 3xx Redirection 4xx Client Errors 5xx Server Errors

HTTP Status Codes CODE STATUS 200 OK 201 Created 204 No Content 401 Unauthorized 404 Not Found 405 Method Not Allowed 422 Unprocessable Entity 500 Internal Server Error

Authentication & Authorization Authentication Articles Authorization Babel Coder

Authentication & authorization Authentication is the process of ascertaining that somebody really is who he claims to be. Authorization refers to rules that determine who is allowed to do what. Babel Coder

A B C 423432g2f3j23 g23hg42j4h2k3 jh3g56jh5gj333 423432g2f3j23 g23hg42j4h2k3 jh3g56jh5gj333 Babel Coder

A B C 423432g2f3j23 g23hg42j4h2k3 jh3g56jh5gj333 423432g2f3j23 Babel Coder

423432g2f3j23 g23hg42j4h2k3 jh3g56jh5gj333 Babel Coder

JSON Web Token JSON Web Token (JWT) is a JSON-based open standard (RFC 7519) for creating access tokens that assert some number of claims. <HEADER>.<PAYLOAD>.<SIGNATURE> eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJtZXNzYWdlIjoiSldUIFJ1bGVzISIsImlhdCI6MTQ1OTQ0ODExOSwiZXhwIjoxNDU5NDU0NTE5fQ.-yIVBD5b73C75osbmwwshQ Babel Coder

angular fundamentals.pdf

More Related Content

What's hot

Similar to angular fundamentals.pdf

More from NuttavutThongjor1

Recently uploaded

angular fundamentals.pdf