a web of applicationskasper reijnders

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

introductionKasper Reijnders○fronteer

○scout

○incentronaut

why this subject

website○using CMS○basic frontend functionality

○lightbox○search○sharing○etc…

○knmg.nl / incentro.com

web apps○using content from some repository○single page applications○advanced frontend

○multiple components○facebook.com / twitter.com / airbnb.com

combined○apps integrated in site

○ used for ‘difficult’ content / calculations / checks

○anwb.nl / unive.nl / snsbank.nl

angular

angular○web apps

○ integrated web apps

angular○version 1.x ○version 2.x and above

○next version will be 4.x

angular > 2.x○Modular

○components and services○TypeScript○Annotations

typescript

import {Goal} from "../types/goal";

export class ThemeService {

private goal: Goal;

constructor() { }}

export class Goal { title: string; status: Array<number> | boolean; planned?: boolean;}

typescript / es6

function test(i) { return i + 2;}

let test = i => i + 2

codecomponents

ngmodule

input and output

services

pipes

directives

templates

componentimport { Component } from '@angular/core';

@Component({ selector: 'batman', template: '<h1>{{name}}</h1>'})export class BatmanComponent { name: string = 'Batman'; hasParents: boolean = false;}

componentimport { Component } from '@angular/core';

@Component({ selector: 'batman', template: '<h1>{{name}}</h1>'})export class BatmanComponent { name: string = 'Batman'; hasParents: boolean = false;}

componentimport { Component } from '@angular/core';

@Component({ selector: 'batman', template: '<h1>{{name}}</h1>'})export class BatmanComponent { name: string = 'Batman'; hasParents: boolean = false;}

componentimport { Component } from '@angular/core';

@Component({ selector: 'batman', template: '<h1>{{name}}</h1>'})export class BatmanComponent { name: string = 'Batman'; hasParents: boolean = false;}

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

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

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

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

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

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

input and outputimport { Component, Input } from '@angular/core';

@Component({ selector: 'batmobile', template: '<div>{{driver}}</div>'})export class BatMobileComponent { @Input() driver: string;}

input and outputimport { Component } from '@angular/core';

@Component({ selector: 'batman', template: '<batmobile [driver]="name"></batmobile>'})export class BatmanComponent { name: string = 'Batman'; hasParents: boolean = false;}

servicesimport { 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); }); }}

servicesimport { Component, Input } from '@angular/core';

@Component({ selector: 'batmobile', template: '<div>{{driver}}</div>'})export class BatMobileComponent { @Input() driver: string;}

servicesimport { 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() { // ... }}

services...

constructor(private batmobileService: BatmobileService) {}

ngOnInit() { this.batmobileService.getCarByDriver(this.driver).then((car) => {

this.car = car });

}

...

pipes

{{ someValue | pipe }}

{{ birthday | date:'fullDate' | uppercase }}

{{ users | filter: 'name' }}

directives

1. Components

2. Structural directives

3. Attribute directives

structural directives

*ngFor

*ngIf

[ngSwitch]

*ngSwitchCase

*ngSwitchDefault

asterisk

<p *ngIf="condition">Our heroes are true!</p>

<template [ngIf]="condition">

<p>Our heroes are true!</p>

</template>

attribute directives

<div [style.background]="'lime'"> some </div>

<p myHighlight [highlightColor]="color"> color</p>

<p [myHighlight]="color">Highlight me!</p>

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

<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

angularjscomponents

ngmodule

input and output

services

pipes

directives

templates

tipsuse angular-cli to jumpstart development -> https://cli.angular.io/

have 1 functionality per file

divide data and function

make reusable components

use folders per type- batman-project/

- src/scripts/- components/- directives/- services/- types/- main.ts