Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Angular 4 Component Model

Angular 4 Component Model

Avatar for Robert Wurm

Robert Wurm

June 07, 2017
Tweet

Other Decks in Programming

Transcript

  1. WARNING By the end of this presentation you 
 won´t

    become an Angular expert, but you´ll start being dangerous!
  2. core (zones, di, abstractions, etc.) renderer http compiler forms router

    i18n ngUpgrade animations CLI material 2 testing language
 services Universal angularfire2 One Framework
  3. A Brief Chronology AngularJS Angular 2 Angular 3 Angular (4)

    - Modularity - Introduced Microsoft´s TypeScript language - Improved dependency injection - Simple routing - AoT compiling - Mobile development - Modern browser only - …. - Performance boost - Stand alone animation module - More syntax in HTML templates 
 (if … else)
  4. Basic Component import { Component } from '@angular/core'; @Component({ selector:

    'my-hello-world', templateUrl: './hello-world.component.html', styleUrls: ['./hello-world.component.scss'] }) export class HelloWorldComponent { }
  5. Binding import { Component } from '@angular/core'; @Component({ selector: 'my-hello-world',

    styleUrls: ['./hello-world.component.scss'], template: ` <h1 [style.color]="color" > {{ title }} </h1> <button (click)="changeColor('green')"> Green </button> ` }) export class HelloWorldComponent { title: string = 'Hello World!'; color: string = 'red'; changeColor(color: string) { this.color = color; } }
  6. Component Lifecycle import { Component } from '@angular/core'; import {

    SampleService } from '../services/sample.service.ts'; @Component({ selector: 'my-hello-world', templateUrl: './hello-world.component.html', styleUrls: ['./hello-world.component.scss'] }) export class HelloWorldComponent { constructor(private sampleService: SampleService) { // do simple stuff } } constructor
  7. Component Lifecycle onInit import { Component, OnInit } from '@angular/core';

    import { SampleService } from '../services/sample.service.ts'; @Component({ selector: 'my-hello-world', templateUrl: './hello-world.component.html', styleUrls: ['./hello-world.component.scss'] }) export class HelloWorldComponent implements OnInit { constructor(private sampleService: SampleService) { // do simple stuff } ngOnInit() { // do elaborate stuff this.samples = this.sampleService.getSamples(); } }
  8. // Pseudo Code import { Component, OnInit, ... } from

    '@angular/core'; @Component({ ... }) export class HelloWorldComponent implements OnInit, ... { ngOnInit() {} ngOnChanges(changes) {} ngDoCheck() {} ngOnDestroy() {} ngAfterContentInit() {} ngAfterContentChecked() {} ngAfterViewInit() {} ngAfterViewChecked() {} } More component lifecycle hooks
  9. import { Component, Input, Output, EventEmitter } from '@angular/core'; @Component({

    selector: 'my-panel', styleUrls: ['./panel.component.scss'], template: ` <div class="header" > <p> {{ title }} </p> <button(click)="onExpandBtnClicked()"> <i class="expand icon"></i> </button> </div> <div class="panel-content" > <ng-content></ng-content> </div> ` }) export class PanelComponent { @Input title: string; @Output onExpand = new EventEmitter(); onExpandBtnClicked() { this.onExpand.emit(); } }
  10. Routing import { ParentComponent } from './components/parent/parent.component'; import { HelloWorldComponent

    } from './components/hello-world/hello-world.component'; import { PanelComponent } from './components/panel/panel.component'; import { ModuleWithProviders } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; const appRoutes: Routes = [ path: 'parent', component: ParentComponent, children: [ { path: 'hello', component: HelloWorldComponent, }, { path: 'panel', component: PanelComponent, } ] } ]; export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
  11. Basic Module import { routing } from './hello-world.routing'; import {

    NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; @NgModule({ imports: [ CommonModule, routing ], declarations: [ HelloWorldComponent, Component1 ], exports: [ HelloWorldComponent ] }) export class HelloWorldModule { }
  12. Routing import { Routes, RouterModule } from '@angular/router'; const appRoutes:

    Routes = [ { path: 'foo', component: Component1 }, { path: 'hello', loadChildren: './components/hello-world/hello-world.module' } ]; export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
  13. Lazy Loading import { Routes, RouterModule } from '@angular/router'; const

    appRoutes: Routes = [ { path: 'foo', component: Component1 }, { path: 'hello', loadChildren: './components/hello-world/hello- world.module#HelloWorldModule' } ]; export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);