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 

No content

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

No content

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

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: `

{{ title }}

Green ` }) 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 

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

Communication

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: ` ` }) export class PanelComponent { @Input title: string; @Output onExpand = new EventEmitter(); onExpandBtnClicked() { this.onExpand.emit(); } } 

Hello StahlstadtJS Hello StahlstadtTS 

Routing ../hello ../panel 

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 

No content

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]