Spreker Tom Hanekamp Datum 25-08-2015

I have not failed. I've just found 10,000 ways that won't work. Thomas A. Edison

Angular 2.0

Agenda

A brief history of AngularJS

Angular 2.0, what’s the news?

Getting started with Angular 2.0

A brief history of AngularJS

<angular />

A brief history of AngularJS

A brief history of AngularJS

A brief history of AngularJS

A brief history of AngularJS

A brief history of AngularJS

Angular 2.0, whats the news?

Mobile first

Angular 2.0, whats the news?

Made for the web of tomorrow

Angular 2.0, whats the news?

Modularity

Mostly finished

Check: https://github.com/angular/router

Angular 2.0, whats the news?

New router

Change detection

Angular 2.0, whats the news?

Model Directive DOM

Directive Directive

Model Model

Angular 2.0, whats the news?

Change detection

Model Components DOM

Angular 2.0, whats the news?

Change detection

x iterations 1 iteration

Angular 2.0, whats the news?

Change detection

Angular 2.0, whats the news?

Change detection

Angular 2.0, whats the news?

Change detection

Angular 2.0, whats the news?

Change detection

Angular 2.0, whats the news?

Change detection

Angular 2.0, whats the news?

Change detection

No usage of existing module loaders

Complex API

Strings as IDs

No lazy loading

All services are singletons

Angular 2.0, whats the news?

Dependency Injection

Angular 2.0, whats the news?

Dependency Injectionclass Gardener {

constructor(sprinkler, rake) {

this.sprinkler = sprinkler;

this.rake = rake;

}

doGardening() {

this.sprinkler.waterFlowers();

this.rake.rakeFallenLeafs();

}

}

Angular 2.0, whats the news?

Dependency Injectionvar Gardener = function(sprinkler, rake) {

this.sprinkler = sprinkler;

this.rake = rake;

};

Gardener.prototype.doGardening = function() {

this.sprinkler.waterFlowers();

this.rake.rakeFallenLeafs();

};

Angular 2.0, whats the news?

Dependency Injectionimport {Sprinkler} from ‘./sprinkler’;

export class Gardener {

…

}

import {Sprinker} from ‘./sprinkler’;

import {Rake} from ‘./rake’;

class Gardener {

constructor(sprinkler, rake) {

this.sprinkler = sprinkler;

this.rake = rake;

}

doGardening() {

this.sprinkler.waterFlowers();

this.rake.rakeFallenLeafs();

}

}

import {Inject} from ‘di/annotations’;

import {Sprinker} from ‘./sprinkler’;

import {Rake} from ‘./rake’;

class Gardener {

constructor(@Inject(Sprinker) sprinkler,

@Inject(Rake) rake) {

this.sprinkler = sprinkler;

this.rake = rake;

}

doGardening() {

this.sprinkler.waterFlowers();

this.rake.rakeFallenLeafs();

}

}

Angular 2.0, whats the news?

Dependency Injectionimport {bootstrap} from ‘angular2/angular2’

import {Gardener} from ‘./gardener’

import {Sprinkler} from ‘./sprinkler’

import {Rake} from ‘./Rake’

…

bootstrap(GardenerApp, [Gardener, Sprinker, Rake]);

Angular 2.0, whats the news?

Dependency Injectionimport {Sprinkler} from ‘./gardener/sprinkler’;

class MockSprinkler {

waterFlowers() {

console.log(‘sprinkle sprinkle’);

}

}

Angular 2.0, whats the news?

Dependency Injectionimport {Provide} from ‘di/annotations’;

import {Sprinkler} from ‘./gardener/sprinkler’;

@Provide(Sprinkler)

class MockSprinkler {

waterFlowers() {

console.log(‘sprinkle sprinkle’);

}

}

Angular 2.0, whats the news?

Dependency Injectionimport {bootstrap} from ‘angular2/angular2’

import {Gardener} from ‘./gardener’

import {MockSprinker} from ‘./mocks/mockSprinkler’

import {Rake} from ‘./Rake’

…

bootstrap(GardenerApp, [Gardener, MockSprinker, Rake]);

Angular 2.0, whats the news?

Components en templates

Application

Filters

Talk Talk

Talks

@Component({

selector: 'talk-cmp',

properties: ['talk'],

events: ['rate']

})

@View({

directives: [FormattedRating, WatchButton, RateButton],

templateUrl: 'talk_cmp.html'

})

class TalkCmp {

talk: Talk;

rate: EventEmitter;

//...

}

Angular 2.0, whats the news?

Components en templates{{talk.title}}

{{talk.speaker}}

<formatted-rating></formatted-rating><watch-button></

watch-button><rate-button></rate-button>

Touch animations

Persistence

Angular 2.0, whats the news?

What else?

Getting started with Angular 2.0

In conclusion

Not finished

Some links: http://angular.iohttps://github.com/angular/router

Youtube:Victor Savkin ng-conf 2015 - Change detectionVojta Jina ng-conf 2014 - Dependency injection

Blogs:http://victorsavkin.com/post/110170125256/change-detection-in-angular-2http://mrale.ph/blog/2015/01/11/whats-up-with-monomorphism.htmlhttp://blog.thoughtram.io/angular/2015/05/18/dependency-injection-in-angular-2.html