2016 First steps with Angular 2 – enterjs

geildanke.com @fischaelameer

Erste Schritte mit Angular 2

http://geildanke.com


Components Data-Binding

Template-Syntax Services

Dependency Injection Pipes

…



Quelle: https://twitter.com/esfand/status/703678692661338115


https://twitter.com/esfand/status/703678692661338115


Quelle: https://www.w3counter.com/globalstats.php?year=2009&month=7


https://www.w3counter.com/globalstats.php?year=2009&month=7


ES2015 JavaScript Modules Web Components

(Shadow DOM, Templates)



Angular is a development platform for building mobile and desktop

web applications.



Platform-unabhängig

Browser Web-Worker Native Apps

Server-side Rendering



JavaScript TypeScript

Dart

Sprachen-Unabhängig



ES5

ES2015

TypeScript



Paradigma-Unabhängigkeit Testbarkeit

Performance



Angular apps are modular.



import { AppComponent } from './app.component';

app.component.ts:

@Component(...)export class AppComponent { … }

app.another-component.ts:



A Component controls a patch of screen real estate that we could call a view.



Component

View

Metadata



Component

View

Metadata

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

@Component({ selector: 'enterjs-app', template: '<h1>Hello EnterJS</h1>'})

export class EnterjsAppComponent { … }





Decorators




export class EnterjsAppComponent {…

}

var EnterjsAppComponent = ng.core .Component({ selector: 'enterjs-app', template: '<h1>Hello EnterJS</h1>' }) .Class({ constructor: function () { … } });

TypeScript ES5



@Component({ selector: 'enterjs-app', templateUrl: 'enterjs.component.html', styleUrls: [ 'enterjs.component.css' ]})



Parent Component Child Components



Component

View

Metadata

Component

View

Metadata

Component

View

Metadata

Component

View

Metadata

Component

View

Metadata



import { Component } from 'angular2/core';

@Component({ selector: 'talk-cmp', templateUrl: './talk.component.html'})

export class TalkComponent { … }

import { Component } from '@angular/core';import { TalkComponent } from './talk.component';

@Component({ selector: 'enterjs-app', template: '<talk-cmp></talk-cmp>', directives: [ TalkComponent ]})


Parent

Child



Data binding is a mechanism for coordinating what users see

with application data values.



<p>{{ talk.title }}</p><p [textContent]="talk.title"></p>

Component

View

Metadata



<img [attr.src]="imageSource">

<p [class.hidden]="isHidden"></p>

<p [style.color]="currentColor"></p>

Property Bindings



Component

View

Metadata Interpolation Property BindingsEvent Bindings



<button (click)="onDelete()">Delete</button>

<talk-cmp (talkDeleted)="deleteTalk()"></talk-cpm>

Event Binding



Component

View

Metadata Interpolation Property Binding

Event Binding

@Output @Input

[(ngModel)]



<input [(ngModel)]="talk.name"/><p>{{ talk.name }}</p>

<input [ngModel]="talk.name" (ngModelChange)="talk.name = $event">

Two-Way Data-Binding



Templates display data and consume user events

with the help of data binding.



ngStyle ngClass

ngFor ngIf

ngSwitch



<p [style.color]="currentColor">Hello!</p>

<p [ngStyle]="{ fontWeight: 900, color: currentColor }">Big Hello!</p>

<p [ngStyle]="setStyles()">Bigger Hello!</p>

NgStyle



<p [class.hidden]="isHidden">Hello?</p>

<p [ngClass]="{ active: isActive, hidden: isHidden }">Hello??</p>

<p [ngClass]="setClasses()">Hello???</p>

NgClass



<p *ngFor="let talk of talks">{{ talk.name }}</p>

<talk-cmp *ngFor="let talk of talks"></talk-cmp>

NgFor

<talk-cmp *ngFor="let talk of talks; let i=index" (talkDeleted)="deleteTalk(talk, i)"></talk-cmp>



<h2 *ngIf="talks.length > 0"><Talks:</h2>

NgIf

<h2 [style.display]="hasTalks ? 'block' : 'none'">Talks:</h2>



<div [ngSwitch]="talksCount"> <h2 *ngSwitchWhen="0">No talks available.</h2> <h2 *ngSwitchWhen="1">Talk:</h2> <h2 *ngSwitchDefault>Talks:</h2></div>

NgSwitch



<input #talk placeholder="Add a talk"><button (click)="addTalk(talk.value)">Add talk</button>

Template Reference Variables



A service is typically a class with a narrow, well-defined purpose.



export class TalkService {

private talks : String[] = [];

getTalks() { … } setTalk( talk : String ) { … }

}

talk.service.ts:



Angular's dependency injection system creates and delivers

dependent services "just-in-time".



EnterjsAppComponent

YetAnotherServiceAnotherServiceTalkService

Injector



import { Component } from '@angular/core';import { TalkService } from './bookmark.service';

@Component({ selector: 'enterjs-app', templateUrl: 'enterjs.component.html', providers: [ TalkService ]})

export class EnterjsAppComponent {

constructor( private talkService : TalkService ) {}

…

}



Root Injector

Injector InjectorInjector

Injector

Injector

Injector

Injector



import { Injectable } from 'angular2/core';import { Http } from 'angular2/http';

@Injectable()

export class TalkService {

constructor( private http: Http ) {}

…

}

talk.service.ts:



Components Data-Binding

Template-Syntax Services

Dependency Injection Pipes

…



Pipes transform displayed values within a template.


<p>{{ 'Hello EnterJS' | uppercase }}</p>

<p>{{ 'Hello EnterJS' | lowercase }}</p>

UpperCasePipe, LowerCasePipe

<p>{{ talkDate | date:'ddMMyyyy' }}</p>

<p>{{ talkDate | date:'longDate' }}</p>

<p>{{ talkDate | date:'HHmm' }}</p>

<p>{{ talkDate | date:'shortTime' }}</p>

DatePipe


<p>{{ talkDate | date:'ddMMyyyy' }}</p><p>{{ talkDate | date:'dd-MM-yyyy' }}</p><p>{{ talkDate | date:'MM-dd-yyyy' }}</p>

<p>15.06.2016</p>

de-de

<p>06/15/2016</p>

en-us


<p>{{ 11.38 | currency:'EUR' }}</p>

<p>{{ 11.38 | currency:'USD' }}</p>

<p>{{ 0.11 | percent }}</p>

<p>{{ 0.38 | percent:'.2' }}</p>

CurrencyPipe, PercentPipe

<p>{{ 'EnterJS' | slice:0:5 }}</p>

<p>{{ talks | slice:0:1 | json }}</p>

<p>{{ 1138 | number }}</p>

<p>{{ 1138 | number:'.2' }}</p>

NumberPipe, SlicePipe

<p>{{ talks }}</p>

<p>{{ talks | json }}</p>

<p>{{ talks | slice:0:1 | json }}</p>

JsonPipe


import { Component } from 'angular2/core';

@Component({ selector: 'talk-cmp', template: '<p>{{ asyncTalk | async }}</p>'})

export class TalkComponent { asyncTalk: Promise<string> = new Promise( resolve => { window.setTimeout( () => resolve( 'No Talks' ), 1000 ); });}

AsyncPipe



!



import { PipeTransform, Pipe } from 'angular2/core';

@Pipe({name: 'ellipsis'})

export class EllipsisPipe implements PipeTransform {

transform( value ) { return value.substring( 0, 10 ) + '…'; }}

CustomPipe



Angular looks for changes to data-bound values through

a change detection process that runs after every JavaScript event.



Quelle: https://docs.google.com/presentation/d/1GII-DABSG5D7Yhik4Be5RvL6IXPt-Kg8lXFLnxkhKsU


https://docs.google.com/presentation/d/1GII-DABSG5D7Yhik4Be5RvL6IXPt-Kg8lXFLnxkhKsU


An Angular form coordinates a set of data-bound user controls,

tracks changes, validates input, and presents errors.



Forms

Template-Driven Forms Model-Driven Forms



Angular has the ability to bundle component styles with components

enabling a more modular design than regular stylesheets.



View Encapsulation

Native Emulated

None



Unit-Tests E2E-Tests

Http-Modul Router-Modul



[email protected]

https://geildanke.com/ng2comet

@fischaelameer


mailto:[email protected]

https://geildanke.com/ng2comet

2016 First steps with Angular 2 – enterjs

Technology

Transcript of 2016 First steps with Angular 2 – enterjs