Angular 4 Component Model

Angular 4  component model Robert Wurm www.easysolutions.io

WARNING By the end of this presentation you   won´t
become an Angular expert, but you´ll start being dangerous!

What is   Angular

core (zones, di, abstractions, etc.) renderer http compiler forms router
i18n ngUpgrade animations CLI material 2 testing language  services Universal angularﬁre2 One Framework

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)

Angular´s Core

Component ng generate component HelloWorld src/app/hello-world/ hello-world.component.css hello-world.component.html hello-world.component.spec.ts hello-world.component.ts
<hello-world></hello-world

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 { }

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; } }

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

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(); } }

// 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

Architecture <my-sidebar/> <my-header/> <hello-world></hello-world <hello-world></hello-world <hello-world></hello-world <hello-world></hello-world <my-parent-component/> <app-component/>

Component-Tree sidebar app-root parent header hello-world hello-world

Communication <my-parent-component/> <hello-world></hello-world Input Output

Example with Panel title=“Hello Stahlstadt” Hello Stahlstadt onExpand

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(); } }

<body> <my-panel [title]="'Hello StahlstadtJS'" (onExpand)="foo()"></my-panel> <my-panel [title]="'Hello StahlstadtTS'" (onExpand)="foo()"></my-panel> </body>
Hello StahlstadtJS Hello StahlstadtTS

Routing <router-outlet></router-outlet> <hello-world></hello-world> <my-panel></my-panel> ../hello ../panel <my-parent-component> </my-parent-component>

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);

Looks great  BUT

Modules ng generate module HelloWorld HelloWorldModule Component1 Component 2 Component
… Import Export routing

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 { }

Component-Tree component1 app-module module1 component2

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);

Single Page Application  SPA Client Server Initial Request AJAX JSON
{ .. } Bundle.js ng build --env=prod

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);

Client Server Initial Request AJAX JSON { .. } Bundle0.js
Lazy Loading Bundle1.js ../hello

Demo Robert Wurm

Question, please? Robert Wurm [email protected]

Angular 4 Component Model

Angular 4 Component Model

Robert Wurm

Other Decks in Programming

Featured

Transcript