Angular 2 is a rewrite of AngularJS for modern web development. It improves on AngularJS by being faster, easier to use and learn, and built on proven best practices. Some key differences include components replacing controllers, unidirectional data flow instead of two-way binding, and type-based dependency injection rather than naming. While the core concepts remain similar, the implementation in Angular 2 is cleaner. However, setting up a full Angular project can still be complicated due to dependencies on build tools and module bundling.

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?