angular 2 presentation

1. a web of applications
kasper reijnders

2. 01 introduction tijd (minuten) 1-3
02 why this subject tijd (minuten) 5-10
03 summarize tijd (minuten) 2-5
04 angular tijd (minuten) 10-20
tonight

3. introduction
Kasper Reijnders
○ fronteer
○ scout
○ incentronaut

4. why this subject

13. website
○ using CMS
○ basic frontend functionality
○lightbox
○search
○sharing
○etc…
○ knmg.nl / incentro.com

14. web apps
○ using content from some repository
○ single page applications
○ advanced frontend
○multiple components
○ facebook.com / twitter.com / airbnb.com

15. combined
○ apps integrated in site
○ used for ‘difficult’ content / calculations /
checks
○ anwb.nl / unive.nl / snsbank.nl

16. angular

17. angular
○ web apps
○ integrated web apps

18. angular
○ version 1.x
○ version 2.x and above
○next version will be 4.x

19. angular > 2.x
○ Modular
○components and services
○ TypeScript
○ Annotations

22. typescript
import {Goal} from "../types/goal";
export class ThemeService {
private goal: Goal;
constructor() {
}
}
export class Goal {
title: string;
status: Array<number> | boolean;
planned?: boolean;
}

23. typescript / es6
function test(i) {
return i + 2;
}
let test = i => i + 2

24. code
components
ngmodule
input and output
services
pipes
directives
templates

25. component
import { Component } from '@angular/core';
@Component({
selector: 'batman',
template: '<h1>{{name}}</h1>'
})
export class BatmanComponent {
name: string = 'Batman';
hasParents: boolean = false;
}

26. component
import { Component } from '@angular/core';
@Component({
selector: 'batman',
template: '<h1>{{name}}</h1>'
})
export class BatmanComponent {
name: string = 'Batman';
hasParents: boolean = false;
}

27. component
import { Component } from '@angular/core';
@Component({
selector: 'batman',
template: '<h1>{{name}}</h1>'
})
export class BatmanComponent {
name: string = 'Batman';
hasParents: boolean = false;
}

28. component
import { Component } from '@angular/core';
@Component({
selector: 'batman',
template: '<h1>{{name}}</h1>'
})
export class BatmanComponent {
name: string = 'Batman';
hasParents: boolean = false;
}

29. module
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BatmanComponent } from './batman.component';
@NgModule({
imports: [
BrowserModule
],
declarations: [
BatmanComponent
],
bootstrap: [ BatmanComponent ]
})
export class EverythingIsAwesomeApp { }

30. module
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BatmanComponent } from './batman.component';
@NgModule({
imports: [
BrowserModule
],
declarations: [
BatmanComponent
],
bootstrap: [ BatmanComponent ]
})
export class EverythingIsAwesomeApp { }

31. module
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BatmanComponent } from './batman.component';
@NgModule({
imports: [
BrowserModule
],
declarations: [
BatmanComponent
],
bootstrap: [ BatmanComponent ]
})
export class EverythingIsAwesomeApp { }

32. module
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BatmanComponent } from './batman.component';
@NgModule({
imports: [
BrowserModule
],
declarations: [
BatmanComponent
],
bootstrap: [ BatmanComponent ]
})
export class EverythingIsAwesomeApp { }

33. module
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BatmanComponent } from './batman.component';
@NgModule({
imports: [
BrowserModule
],
declarations: [
BatmanComponent
],
bootstrap: [ BatmanComponent ]
})
export class EverythingIsAwesomeApp { }

34. module
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BatmanComponent } from './batman.component';
import { BatMobileComponent } from './batmobile.component';
@NgModule({
imports: [
BrowserModule
],
declarations: [
BatmanComponent, BatMobileComponent
],
bootstrap: [ BatmanComponent ]
})
export class EverythingIsAwesomeApp { }

35. input and output
import { Component, Input } from '@angular/core';
@Component({
selector: 'batmobile',
template: '<div>{{driver}}</div>'
})
export class BatMobileComponent {
@Input()
driver: string;
}

36. input and output
import { Component } from '@angular/core';
@Component({
selector: 'batman',
template: '<batmobile [driver]="name"></batmobile>'
})
export class BatmanComponent {
name: string = 'Batman';
hasParents: boolean = false;
}

37. services
import { Injectable } from '@angular/core';
import { Car } from 'car';
import { CARS } from 'CARS.MOCK';
@Injectable()
export class BatmobileService {
constructor() {}
getCarPark(): Promise<Car[]> {
return Promise.resolve(CARS); // this can be replaced with a REST call
}
getCarByDriver(driver: string): Promise<Car> {
return this.getCarPark().then((cars) => {
return cars.find(car => car.driver === driver);
});
}
}

38. services
import { Component, Input } from '@angular/core';
@Component({
selector: 'batmobile',
template: '<div>{{driver}}</div>'
})
export class BatMobileComponent {
@Input()
driver: string;
}

39. services
import { Component, Input, OnInit } from '@angular/core';
import { BatmobileService } from 'batmobileservice';
@Component({
selector: 'batmobile',
template: '<div>{{driver}}</div>'
})
export class BatMobileComponent implements ngOnInit {
@Input()
driver: string;
constructor(private batmobileService: BatmobileService) {}
ngOnInit() {
// ...
}
}

40. services
...
constructor(private batmobileService: BatmobileService) {}
ngOnInit() {
this.batmobileService.getCarByDriver(this.driver).then((car) => {
this.car = car
});
}
...

41. pipes
{{ someValue | pipe }}
{{ birthday | date:'fullDate' | uppercase }}
{{ users | filter: 'name' }}

42. directives
1. Components
2. Structural directives
3. Attribute directives

43. structural directives
*ngFor
*ngIf
[ngSwitch]
*ngSwitchCase
*ngSwitchDefault

44. asterisk
<p *ngIf="condition">Our heroes are true!</p>
<template [ngIf]="condition">
<p>Our heroes are true!</p>
</template>

45. attribute directives
<div [style.background]="'lime'"> some </div>
<p myHighlight [highlightColor]="color"> color</p>
<p [myHighlight]="color">Highlight me!</p>

46. template options
<input [value]="firstName"> Binds property value to the result of expression firstName.
<div [attr.role]="myAriaRole"> Binds attribute role to the result of expression myAriaRole.
<div [class.extra-sparkle]="isDelightful"> Binds the presence of the CSS class extra-sparkle on the
element to the truthiness of the expression isDelightful.
<div [style.width.px]="mySize"> Binds style property width to the result of expression mySize
in pixels. Units are optional.
<button (click)="readRainbow($event)"> Calls method readRainbow when a click event is triggered on
this button element (or its children) and passes in the event
object.
<my-cmp [(title)]="name"> Sets up two-way data binding. Equivalent to: <my-cmp
[title]="name" (titleChange)="name=$event">

47. <p>Card No.: {{cardNumber |
myCardNumberFormatter}}</p>
Transforms the current value of expression cardNumber via
the pipe called myCardNumberFormatter.
<p>Employer: {{employer?.companyName}}</p> The safe navigation operator (?) means that the employer
field is optional and if undefined, the rest of the expression
should be ignored.
<p>Hello {{superHero}}</p> Binds text content to an interpolated string, for example,
"Hello Seabiscuit".
template options

48. angularjs
components
ngmodule
input and output
services
pipes
directives
templates

49. tips
use angular-cli to jumpstart development -> https://cli.angular.io/
have 1 functionality per file
divide data and function
make reusable components

50. use folders per type
- batman-project/
- src/scripts/
- components/
- directives/
- services/
- types/
- main.ts