Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

Angular JS2 Training Session #2

Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Nächste SlideShare
React & Redux for noobs
React & Redux for noobs
Wird geladen in …3
×

Hier ansehen

1 von 45 Anzeige

Weitere Verwandte Inhalte

Diashows für Sie (20)

Ähnlich wie Angular JS2 Training Session #2 (20)

Anzeige

Aktuellste (20)

Angular JS2 Training Session #2

  1. 1. presented by Paras Mendiratta Session 2
  2. 2. Topics for Today 1. Planning App 2. Data Model 3. Component LifeCycle 4. Communication Between Components 5. Directives 6. Pipes 7. Routes 8. Services 9. Forms 2
  3. 3. 1. Planning
  4. 4. Create Project // 1. Create New Project ng new cookbook // 2. Go to Project Directory cd cookbook // 3. Add Bootstrap Library npm install bootstrap // 4. Add Styles in “.angular-cli.json” file "../node_modules/bootstrap/dist/css/bootstrap.min.css" // 5. Run Project & open browser with URL: http://localhost:4200 ng serve
  5. 5. Recipe Page
  6. 6. Shopping List Page
  7. 7. Edit Recipe Page
  8. 8. New Recipe Page
  9. 9. 9 Root Header Shopping List Recipe Book FeatureComponent Shopping List Shopping List Edit Recipe List Recipe Item Recipe Detail Model Ingredient Recipe Recipe Edit Service Recipe ServiceShoppingList Service
  10. 10. 2. Data Model
  11. 11. Data Model ★ Data model is simple typescript class which binds JSON model data and provides
 OOPS advantage on top of it. Example: export class Product { 
 private name: string; protected value: string; public game: string;
 constructor(name: string) { this.name = name; } getName(): string { return this.name; } } 11
  12. 12. Recipe Model recipe.model.ts File: export class Recipe { public name: string; public description: string; public imagePath: string; public ingredients: Ingredient[]; // Constructor 
 constructor(name:string, desc:string, imgPath:string, ingredients:Ingredient[]) { this.name = name; this.description = desc; this.imagePath = imgPath; this.ingredients = ingredients; } } 12
  13. 13. Ingredient Model ingredient.model.ts File: export class Ingredient { // Constructor 
 constructor(public name:string, public amount:number) {}
 } 13
  14. 14. 2. Component LifeCycle
  15. 15. Component Life Cycle
  16. 16. import { Component, OnInit, OnDestroy, OnChanges, AfterContentInit, AfterViewInit, SimpleChanges  } from '@angular/core'; @Component({     selector: 'app-shopping-edit',     templateUrl: './shopping-edit.component.html',     styleUrls: ['./shopping-edit.component.css'] }) export class TestComponent implements OnInit, OnDestroy, OnChanges, AfterContentInit, AfterViewInit {     constructor() { }     ngOnInit() {         console.log('#ngOnInit');     }     ngOnDestroy(): void {         console.log('#ngOnDestroy');     }     ngOnChanges(changes: SimpleChanges): void {         console.log('#ngOnChanges');     }     ngAfterViewInit(): void {         console.log('#ngAfterViewInit');     }     ngAfterContentInit(): void {         console.log('#ngAfterContentInit');     } } Console Output
 
 1. #ngOnInit 2, #ngAfterContentInit 3. #ngAfterViewInit
 4. #ngOnDestroy #ngOnChanges is not called because it is called when bounded property gets changed. Example property bound with @Input tag.
  17. 17. 3. Communication Between Components
  18. 18. Types of Communication 1. Informing changes to Peer Component 2. Informing changes to Parent Component 3. Informing changes to Child Component
  19. 19. How to Communicate? Service Layer Used for passing data from parent to child components Used for informing parent for data change happen in Child using Events Allows Parent to access Child’s public variable and methods @ViewChild
 Tag Allows Parent to access Child Component Public Variables Using 
 Local Variable Allows Bidirectional Communication @Input
 Tag @Output Tag
  20. 20. @Input export class ChildComponent { @Input() child: Child; @Input('master') masterName: string; } Child Component File: Parent Template File: <h2>{{master}} controls {{children.length}} Children</h2> <app-child *ngFor="let child of children" [child]="child" [master]="master"> </app-child> Alias Name for ‘masterName’
  21. 21. @Output ✓ The child component exposes an EventEmitter property with which it emits
 events when something happens. ✓ The parent binds to that event property and reacts to those events. export class ChildComponent { @Output() onTouched = new EventEmitter<boolean>(); touched(agreed: boolean) { this.onTouched.emit(agreed); } } Child Component File: <button (click)="touched(true)">Agree</button> <button (click)="touched(false)">Disagree</button> Child Template File:
  22. 22. @Output export class ParentComponent { onTouched(agreed: boolean) { console.log(“Agreed:”, agreed); } } Parent Component File: <app-child (onTouched)=“onTouched($event)”></app-child> Parent Template File:
  23. 23. Using Local Variable ✓ A parent cannot directly access the child component. However, if assign a local
 variable to child component tag then we can access its public variables. ✓ To define a local variable we use hash (#) tag. ✓ It is simple and easy to use. ✓ It has drawback that all parent-child wiring has to be done on parent side only. <div>{{agreed}}</button> <app-child #agreed></app-child> Parent Template File:
  24. 24. @ViewChild ✓ When parent need to access the methods of child or wants to alter the variables
 of child component then @ViewChild is useful. Parent Component File: export class ParentComponent implements AfterViewInit { @ViewChild(ChildComponent);
 private childComponent: ChildComponent;
 
 ngAfterViewInit() { console.log(“Current State: ”, this.childComponent.getState()); }
 }
  25. 25. Using Services ✓ Services support bidirectional communication within the family. ✓ We use observer-observable design pattern to achieve this.
  26. 26. Component A Button A Component B Button B dataAcopy, dataB, dataCcopy dataA, dataBcopy, dataCcopy Component C Button C dataAcopy, dataBcopy, dataC Objective: Updates the value of A, B, C in all components when 
 Button A, Button B, or Button C presses respectively. Assignm ent
  27. 27. 5. Directives
  28. 28. 1. Component Level - directives with template
 <app-child></app-child> 2. Structural Level - helps in changing DOM Layout
 <div *ngIf="isValid;then content else other_content">
 here is ignored
 </div>
 
 <ng-template #content>content here...</ng-template>
 <ng-template #other_content>other content here...</ng-template> 3. Attribute Level - Changes the appearance or behaviour of the component “Modifies DOM elements and/or extend their behaviour” Directives
  29. 29. Attribute Directive import { Directive, ElementRef, Input } from ‘@angular/core’; @Directive({ selector: [‘app-background’] }) export class BackgroundDirective { @Input(‘app-background’) backgroundValue: string;
 
 constructor(private el: ElementRef) {} ngOnInit() { this.setBackgroundColor(this.backgroundValue); } setBackgroundColor(value:string) { this.el.nativeElement.style.background = value; } } Background Colour Modifier
  30. 30. Using Attribute Directive // Example: Background Colour Modifier
 <div app-background=“green”>This is with green colour background.</div> <div app-background=“pink”>This is with pink colour background.</div> <div app-background=“seagreen”>This is with ‘sea green’ colour background.</div>
  31. 31. 6. Pipes
  32. 32. “Pipe transform displayed values within a template.” Pipes
  33. 33. Pipe Example // Here birthday is date object and pipe prints birthday in format of // “MM/DD/YY” <div> Ram’s birthday comes on {{ birthday | date:“MM/dd/yy” }} </div> // Prints Name of product in UPPERCASE letters <div> Ram’s birthday comes on {{ productName | uppercase }} </div> // Prints Name of product in LOWERCASE letters <div> Ram’s birthday comes on {{ productName | lowercase }} </div>
  34. 34. Custom Pipe exponential-strength.pipe.ts
 import { Pipe, PipeTransform } from '@angular/core'; @Pipe({name: 'exponentialStrength'}) export class ExponentialStrengthPipe implements PipeTransform { transform(value: number, exponent: string): number { let exp = parseFloat(exponent); return Math.pow(value, isNaN(exp) ? 1 : exp); } } ComponentA.template.html
 <h2>Power Booster</h2> <p>Super power boost: {{2 | exponentialStrength: 10}}</p>
  35. 35. 7. Routes
  36. 36. Route Example const appRoutes: Routes = [ { path: ‘home’, redirectTo:‘/’, pathMatch: ‘full’}, { path: ‘users’, component: UserComponent, children:[ { path: ‘’, component: NoUserComponent }, { path: ‘new’, component: UserEditComponent }, { path: ‘:id’, component: UserProfileComponent }, { path: ‘:id/edit’, component: UserEditComponent }], { path: ‘game-list’, component: GameListComponent }, { path: ‘’, component: HomeComponent } ];

  37. 37. Integrating Route app.module.ts import { NgModule } from '@angular/core'; import { BrowserModule } from ‘@angular/platform-browser'; import { Routes, RouterModule } from ‘@angular/router‘; import { AppComponent } from ‘./app.component'; @NgModule({ imports: [ BrowserModule, RouterModule.forRoot(appRoutes) ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { }

  38. 38. Route Tags <router-outlet></router-outlet> <!-- Routed views go here --> <!—— Router Link Example ——> <a routerLink=“/home”>Home</a> <!—— Currently active link ——> <a routerLink=“/users” routerLinkActive=“active”>Users</a>
  39. 39. 8. Services
  40. 40. Service “ Responsible for arranging data for view components. ” ★ Services are injectable. ★ A service provided in a component, can be reused by its children. ★ Normally, we keep business logics in services. ★ Services can be used:- - For fetching data from server - For fetching data from LocalStorage or SessionStorage ★ Service can be used for passing data from one component to any other component. ★ Service can be used to inform change in data in one component to another component who is observing the data. We never create instance of service. It is created by Angular. 40
  41. 41. Service Example Example: import { Injectable } from ‘@angular/core’; import { Product } from ‘./product.model’; import { PriceService } from ‘./price.service’; @Injectable() export class ProductService { private products: Product[] = [ new Product(‘Product #A’, ‘Plier’), new Product(‘Product #B’, ‘Wrench’) ]; constructor(private priceService: PriceService) { } getProduct(index: number): Promise<Product> { return Promise.resolve(this.products[index]); } } 41
  42. 42. 8. Forms
  43. 43. Forms Template Driven Reactive Forms 43 Easy to Use Suitable for simple scenarios Similar to Angular 1.x Two way data binding (NgModel) Minimal component code Automatic track of form & its data Unit testing is another challenge Flexible but needs lot of practice Handles any complex scenarios Introduce in Angular 2 No data binding is done More code in Component over HTML Data tracked via events & dynamically added elements Easier Unit Testing
  44. 44. Wrapping up ✓ Planning Angular App ✓ Component LifeCycle ✓ Communication between components ✓ Routes ✓ Directives Next Session ๏ User Authentication ๏ Consuming HTTP API ๏ Integrating with Firebase ๏ Production Deployment 44 Topics Covered ✓ Routes ✓ Data Model ✓ Services ✓ Forms ✓ Pipes
  45. 45. Thank You

×