![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](https://image.slidesharecdn.com/prasentationdevday-160706225127/85/Angular-2-What-s-New-23-320.jpg)
![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](https://image.slidesharecdn.com/prasentationdevday-160706225127/85/Angular-2-What-s-New-24-320.jpg)
![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](https://image.slidesharecdn.com/prasentationdevday-160706225127/85/Angular-2-What-s-New-27-320.jpg)
![Databinding
Interpolation
Property Binding
Event Binding
Two Way Binding
{{value}}
[property]="value"
(event)="handler"
[(ngModel)]="value"
DOM
(Template)
component](https://image.slidesharecdn.com/prasentationdevday-160706225127/85/Angular-2-What-s-New-30-320.jpg)
![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](https://image.slidesharecdn.com/prasentationdevday-160706225127/85/Angular-2-What-s-New-33-320.jpg)
![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:](https://image.slidesharecdn.com/prasentationdevday-160706225127/85/Angular-2-What-s-New-35-320.jpg)
Angular 2: What's New?
- 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
- 8. Forget anything you know about AngularJS?
- 9. About me … Jonas Bandi [email protected] 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!
- 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.
- 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 …
- 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/
- 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 [email protected] Twitter: @jbandi Tomorrow: DevDay Workshop - Hands On Angular 2 Digicomp Course: Front-End-Entwicklung mit Angular 2, JavaScript und TypeScript Questions?