Jan 2017 - a web of applications (angular 2)

a web of applications
kasper 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

introduction
Kasper Reijnders
○ fronteer
○ scout
○ incentronaut

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

code
components
ngmodule
input and output
services
pipes
directives
templates

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

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

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

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

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

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

services
import { Component, Input } from '@angular/core';
@Component({
})
export class BatMobileComponent {
@Input()
driver: string;
}

services
import { Component, Input, OnInit } from '@angular/core';
import { BatmobileService } from 'batmobileservice';
@Component({
})
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

angularjs
components
ngmodule
input and output
services
pipes
directives
templates

tips
use 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

Jan 2017 - a web of applications (angular 2)

More Related Content

What's hot (20)

Similar to Jan 2017 - a web of applications (angular 2) (20)

Recently uploaded (20)

Jan 2017 - a web of applications (angular 2)