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)

Related slideshows

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

More Related Content

What's hot

What's hot (20)

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

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

Recently uploaded

Recently uploaded (20)

Jan 2017 - a web of applications (angular 2)