The document discusses Angular 2.0, highlighting its history, new features, and improvements over AngularJS. Key topics include modularity, change detection, dependency injection, and components with templates. It concludes with resources for further learning and development related to Angular 2.0.

1. 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

2. Agenda
A brief history of AngularJS
Angular 2.0, what’s the news?
Getting started with Angular 2.0

3. A brief history of
AngularJS
<angular />

4. A brief history of
AngularJS

5. A brief history of
AngularJS

6. A brief history of
AngularJS

7. A brief history of
AngularJS

8. A brief history of
AngularJS

9. Angular 2.0, whats the
news?
Mobile first

10. Angular 2.0, whats the
news?
Made for the web of tomorrow

11. Angular 2.0, whats the
news?
Modularity

12. Mostly finished
Check: https://github.com/angular/router
Angular 2.0, whats the
news?
New router

13. Change detection
Angular 2.0, whats the
news?
Model Directive DOM
Directive Directive
Model Model

14. Angular 2.0, whats the
news?
Change detection
Model Components DOM

15. Angular 2.0, whats the
news?
Change detection
x iterations 1 iteration

16. Angular 2.0, whats the
news?
Change detection

17. Angular 2.0, whats the
news?
Change detection

18. Angular 2.0, whats the
news?
Change detection

19. Angular 2.0, whats the
news?
Change detection

20. Angular 2.0, whats the
news?
Change detection

21. Angular 2.0, whats the
news?
Change detection

22. 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

23. Angular 2.0, whats the
news?
Dependency Injection
class Gardener {
constructor(sprinkler, rake) {
this.sprinkler = sprinkler;
this.rake = rake;
}
doGardening() {
this.sprinkler.waterFlowers();
this.rake.rakeFallenLeafs();
}
}

24. Angular 2.0, whats the
news?
Dependency Injection
var Gardener = function(sprinkler, rake) {
this.sprinkler = sprinkler;
this.rake = rake;
};
Gardener.prototype.doGardening = function() {
this.sprinkler.waterFlowers();
this.rake.rakeFallenLeafs();
};

25. Angular 2.0, whats the
news?
Dependency Injection
import {Sprinkler} from ‘./sprinkler’;
export class Gardener {
…
}

26. 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();
}
}

27. 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();
}
}

28. Angular 2.0, whats the
news?
Dependency Injection
import {bootstrap} from ‘angular2/angular2’
import {Gardener} from ‘./gardener’
import {Sprinkler} from ‘./sprinkler’
import {Rake} from ‘./Rake’
…
bootstrap(GardenerApp, [Gardener, Sprinker, Rake]);

29. Angular 2.0, whats the
news?
Dependency Injection
import {Sprinkler} from ‘./gardener/sprinkler’;
class MockSprinkler {
waterFlowers() {
console.log(‘sprinkle sprinkle’);
}
}

30. Angular 2.0, whats the
news?
Dependency Injection
import {Provide} from ‘di/annotations’;
import {Sprinkler} from ‘./gardener/sprinkler’;
@Provide(Sprinkler)
class MockSprinkler {
waterFlowers() {
console.log(‘sprinkle sprinkle’);
}
}

31. Angular 2.0, whats the
news?
Dependency Injection
import {bootstrap} from ‘angular2/angular2’
import {Gardener} from ‘./gardener’
import {MockSprinker} from ‘./mocks/mockSprinkler’
import {Rake} from ‘./Rake’
…
bootstrap(GardenerApp, [Gardener, MockSprinker, Rake]);

32. Angular 2.0, whats the
news?
Components en templates
Application
Filters
Talk Talk
Talks

33. @Component({
selector: 'talk-cmp',
properties: ['talk'],
events: ['rate']
})
@View({
directives: [FormattedRating, WatchButton, RateButton],
templateUrl: 'talk_cmp.html'
})
class TalkCmp {
talk: Talk;
rate: EventEmitter;
//...
}

34. 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>

35. Touch animations
Persistence
Angular 2.0, whats the
news?
What else?

36. Getting started with
Angular 2.0

37. In conclusion
Not finished
Some links:
http://angular.io
https://github.com/angular/router
Youtube:
Victor Savkin ng-conf 2015 - Change detection
Vojta Jina ng-conf 2014 - Dependency injection
Blogs:
http://victorsavkin.com/post/110170125256/change-detection-in-angular-2
http://mrale.ph/blog/2015/01/11/whats-up-with-monomorphism.html
http://blog.thoughtram.io/angular/2015/05/18/dependency-injection-in-
angular-2.html