2016 First steps with Angular 2 – enterjs

geildanke.com @ﬁschaelameer
Erste Schritte mit
Angular 2

Components
Data-Binding
Template-Syntax
Services
Dependency Injection
Pipes
…

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

Quelle: 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 { … }

@Component({
})
Decorators

@Component({
})
export class EnterjsAppComponent {
…
}
var EnterjsAppComponent = ng.core
.Component({
})
.Class({
constructor: function () {
…
}
});
TypeScript ES5

@Component({
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 { TalkComponent } from './talk.component';
@Component({
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-deﬁned 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 { TalkService } from './bookmark.service';
@Component({
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:

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

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

michaela.lehr@geildanke.com
https://geildanke.com/ng2comet
@ﬁschaelameer

2016 First steps with Angular 2 – enterjs

More Related Content

What's hot

Viewers also liked

Similar to 2016 First steps with Angular 2 – enterjs

More from GeilDanke

Recently uploaded

2016 First steps with Angular 2 – enterjs