Presentation from Digicomp DevDay 2016

1. Angular 2:What’s new?
Jonas Bandi, IvoryCode GmbH

2. Once upon a time …

3. … the world was peacefully creating applications
with AngularJS …

4. …but change was lurking in the maze of a mailing list …
https://groups.google.com/forum/#!search/misko$20Hevery$20may$2022$202013/polymer-dev/4RSYaKmbtEk/uYnY3900wpIJ

5. … then the threat became real …
ng-europe, October 2014
https://www.youtube.com/watch?v=gNmWybAyBHI

6. https://twitter.com/kevindente/status/527500820603232257

8. Forget anything you know about AngularJS?

9. About me …
Jonas Bandi
jonas.bandi@ivorycode.com
Twitter: @jbandi
- Freelancer: www.ivorycode.com
- Dozent an der Berner Fachhochschule seit 2007
- Trainer bei Digicomp für AngularJS und Angular 2
- In-House Kurse & Coachings für Web-Technologien im Enterprise (UBS,
Postfinance, Mobiliar, BIT, SBB ... )

10. AngularJS is a powerful Framework …
… but it is old!

11. 1995
2006
2009
2011
2013 20162012
AngularJS
Bootstrap
LoDash React Angular 2

12. https://en.wikipedia.org/wiki/Usage_share_of_web_browsers

13. The web has changed since 2009…
2015

14. Angular 2 is a new implementation of the
concepts behind AngularJS …
… for the modern web.
… but Angular 2 is not an update to AngularJS.

15. Angular 2 is built upon the
modern web:
2015
- web workers
- shadow dom
Angular 2 is built for the
modern web:
• mobile browsers
• modern browsers
• server-side rendering
Angular 2 improves over AngularJS:
• faster
• easier to use & learn
• built on proven best practices (i.e. ui-
components, unidirectional data flow …)

16. The core concepts of Angular 2 are clean and
easy to learn …

18. Angular Key Concepts
controllers components
data-binding data-binding / data-flow
directives directives
services
dependency injection
services
dependency injection
components (ng 1.5) components
AngularJS Angular 2

19. Angular Key Concepts
controllers
components
components (ng 1.5)
AngularJS Angular 2
ES2015 class
JavaScript Function
DDO

20. ToDo-App Component
New-ToDo Component
ToDo-List Component

21. Angular 2 Components
Template Class Metadata
+ +
= Component
@Component
Components are the main building-block of Angular 2.

22. A Simple Component
import {Component} from '@angular/core';
@Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }

23. var app = angular.module('todoApp');
app.controller('todoController',
ToDoController);
ToDoController.$inject = ['ToDoService'];
function ToDoController(todoService) {
var ctrl = this;
ctrl.newToDo = new ToDoItem();
ctrl.todos = todoService.getToDos();
...
@Component({
selector: 'td-todo-app',
template: require('./app.component.html'),
directives: [NewTodo, ToDoList],
providers: [ToDoService]
})
export class TodoApp implements OnInit {
todos: Array<ToDo> = [];
constructor(private todoService:ToDoService){}
ngOnInit() {
this.todos = this.todoService.loadToDos();
}
...
AngularJS Angular 2
Controller -> Component

24. var app = angular.module('todoApp');
app.component('TodoApp', {
templateUrl: 'todo-app.html',
controller: TodoAppComponent
});
ToDoController.$inject = ['ToDoService'];
function TodoAppComponent(todoService) {
var ctrl = this;
ctrl.newToDo = new ToDoItem();
ctrl.todos = todoService.getToDos();
...
@Component({
selector: 'td-todo-app',
template: require('./app.component.html'),
directives: [NewTodo, ToDoList],
providers: [ToDoService]
})
export class TodoApp implements OnInit {
todos: Array<ToDo> = [];
constructor(private todoService:ToDoService){}
ngOnInit() {
this.todos = this.todoService.loadToDos();
}
...
AngularJS Angular 2
Component(ng 1.5) -> Component

25. Directives & Components
A directive is a construct, that is embedded into html and has
a special meaning for the framework.
Directives
Components Structural
Directives
Attribute
Directives
Component Directive
is a
composes

26. Angular Key Concepts
directives directives
AngularJS Angular 2
many directives
from ng1 are not
needed in ng2
templates
a lot of directives
(i.e ng-click, ng-focus,
ng-blur, ng-keyup …)

27. AngularJS vs.Angular 2: Directives
The generic binding capabilities of Angular 2 makes many directives from AngularJS obsolete.
https://docs.angularjs.org/api/ng/directive https://angular.io/docs/ts/latest/api/
<div ng-style={color:'red'}>
<img ng-src="{{ctrl.path}}">
<a ng-href=“{{ctrl.link}}">
<div [style.color]="color">
<img [src]="path">
<a [href]="link">
ng-click="savePerson(person)"
ng-focus="updateSummary()"
ng-blur="commit()"
ng-keyup="updateCalculation()"
(click)="savePerson(person)"
(focus)="updateSummary()"
(blur)="commit()"
(keyup)="updateCalculation()"
AngularJS Angular 2

28. Structural Directives
Use html as a template
<ul class="todo-list" >
<li ng-repeat="todo in ctrl.todos">
{{todo.title}}
<button class="remove-button"
ng-click="ctrl.removeToDo(todo)">
x
</button>
</li>
</ul>
<ul class="todo-list" >
<li *ngFor="let todo of todos">
{{todo.title}}
<button class="remove-button"
(click)="removeToDo(todo)">
x
</button>
</li>
</ul>
AngularJS Angular 2
ng-repeat, ng-if *ngFor, *ngIf

29. Angular Key Concepts
data-binding data-binding / data-flow
AngularJS Angular 2
interpolation &
2-way databinding
interpolation & 2-way databinding
uni-directional data-flow$scope
generic property & event binding

30. Databinding
Interpolation
Property Binding
Event Binding
Two Way Binding
{{value}}
[property]="value"
(event)="handler"
[(ngModel)]="value"
DOM
(Template)
component

31. Nested Components: Uni-Directional Data-Flow
State should be explicitly owned by a component.
• A parent component passes
state to children
• Children should not edit
state of their parent
• Children “notify” parents
(events, actions …)
Child
Component
Child Component
Parent Component
state
properties
go in
logic
eventscomeout
update
@Input()
@Output()
Angular formalises unidirectional data-flow with @Input() and @Output() properties.

32. Angular Key Concepts
services services
AngularJS Angular 2
a function registered
as factory, service or
provider
ES2015 class

33. Services
Objects that perform a specific job.
Instantiated by Angular.
var app = angular.module('todoApp');
app.factory('toDoService', toDoService);
function toDoService() {
'use strict';
return {
getToDos: getToDos,
addToDo: addToDo,
removeToDo: removeToDo
};
...
@Injectable()
export class ToDoService {
loadToDos():Array<ToDo> {
var loadedToDos =
JSON.parse(
localStorage
.getItem(TODOS_KEY)
);
return loadedToDos || [];
}
...
AngularJS Angular 2

34. Angular Key Concepts
dependency injection dependency injection
AngularJS Angular 2
DI based on naming
DI based on types
(usingTypeScript and
Decorators)
Singletons Hierarchical DI

35. Dependency Injection
var app = angular.module('todoApp');
app.factory('toDoService', toDoService);
function toDoService() {
...
}
@Injectable()
export class ToDoService {
...
}
AngularJS Angular 2
@Component({
selector: 'td-todo-app',
template: require('./app.component.html'),
directives: [NewTodo, ToDoList],
providers: [ToDoService]
})
export class TodoApp implements OnInit {
constructor(private todoService:ToDoService){}
...
}
app.controller('todoController',
ToDoController);
ToDoController.$inject = ['toDoService'];
function ToDoController(todoService) {
...
}
registration:
injection:

36. Angular Key Concepts
controllers components
data-binding data-binding / data-flow
directives directives
services
dependency injection
services
dependency injection
components (ng 1.5) components
AngularJS Angular 2
Many key concepts remain the same.
But the implementation has changed.

37. There is more …
filters Pipes
AngularJS Angular 2
http with Promises http with RxJs
(Promises still supported)
Routing
(template centered)
Hierarchical
Component Router
… …

38. The core concepts of Angular 2 are clean and
easy to learn …
… but setting up a full Angular project can be
quite complicated today.

39. Angular JS

40. AngularJS: an effective tool but not elegant …

41. SystemJS
2015
webpack
jspm
Angular 2

42. Angular is distributed through NPM
Node Package Manger
To get Angular on your development machine, you have to
install Node.JS.
https://www.npmjs.com/

43. 2015
ES5
Multi-Language

44. Language Choices
ES5
2015
weakly typed strongly typed
(optional)
no com-
pilation compilation

45. Angular for ES2015 &TS relies on ES2015 modules.
There is no support for ES2015 modules in browsers today.
A module-system is mandatory.
VS.
SystemJS
To pack or (not) to pack?

46. Build Toolchain
Typically you need a
front-end build for
transpilation and module
bundling.

47. Angular 2 aspires to be a platform
progressive web-apps for mobile
(web workers, cache, push, offline)
https://mobile.angular.io/
classic web-apps for
desktops
installed mobile apps
(hybrid)
installed mobile apps
(native integrations)
server side rendering
https://universal.angular.io/
installed desktop apps
https://github.com/NathanWalker/angular2-seed-advanced
dev tooling
https://cli.angular.io/

48. Is Angular 2 ready for production?
October 2014: Initial announcement of Angular 2
December 2015: Angular 2 released as beta
May 2016: Angular 2 Release Candidate 0
June 2016: Angular 2 Release Candidate 2
What is missing:
- Router (!)
- Offline Compilation & BuildToolchain
- internationalization
- 3rd Party Ecosystem
https://www.reddit.com/r/angularjs/comments/4i2n3k/angular_2_was_never_ready_for_a_release_candidate/

49. The Router Debacle
http://blog.jonasbandi.net/2016/06/ng2-router.html
- Dez 2014: New Router announced for
Angular 1.4 and Angular 2
- June 2015: New Router is deprecated
- Angular 2 beta is developed with the
Component router
- March 2016: Component Router is
released for Angular 1.5
- May 2016: Component Router is
deprecated. Router 2.0 is part of
Angular 2 RC1
- June 2016: Router 2.0 is deprecated,
Router 3.0 is announced

50. Jonas Bandi
jonas.bandi@ivorycode.com
Twitter: @jbandi
Tomorrow: DevDay Workshop - Hands On Angular 2
Digicomp Course: Front-End-Entwicklung mit Angular 2, JavaScript und
TypeScript
Questions?