Angular 2.0 is a complete rewrite of AngularJS with significant changes including the removal of scopes, controllers, and directives in favor of components and a new template syntax. It is built on TypeScript, and developers should prepare by becoming familiar with ES6 and Angular 1.4's router. The document also provides examples of services and directives in Angular 2.0.

1. Angular 2.0
GETTING READY

2. What is Angular 2.0?
 Total rewrite of AngularJS
 In developer preview
 Release date early 2016… maybe

3. What is different
 No scope
 No controller
 No modules
 No directives
 Components
 New template syntax

4. What is made of?
 2014. AtScript
 Traceour
 2015. TypeScript 1.5
 AtScript = TypeScript

5. What about Angular 1.0
 Still being developed 1.4, 1.5, 1.6…
 angular.io vs angularjs.org
 Controller as , angular 1.4 router

6. How to prepare
 ES6 (Traceur or TypeScript 1.5)
 Angular 1.4 router
 “Controller As” syntax

7. Services
angular.module('myModule')
.service('addresses', ['addressService', '$q', function(addressService, $q) {
this.prefix = 'My Address: ';
this.printAddress = function() {
var deferred = $q.defer(),
self = this;
addressService.getFullAddress(function(addr) {
deferred.resolve(self.prefix + addr);
}, deferred.reject);
return deferred.promise;
};
});

8. Services
angular.module('myModule')
.service('addresses', ['addressService', '$q', Addresses]);
class Addresses {
constructor(addressService, $q) {
this.$q = $q;
this.addressService = addressService;
this.prefix = "My Address: "
}
printAddress() {
return this.$q((resolve, reject) => {
addressService.getFullAddress((addr) => {
resolve(this.prefix + addr);
}, reject);
});
}
}

9. Services
import {AddressService} from “..file/where/addressService/is”
class Addresses {
constructor(addressService: AddressService) {
this.addressService = addressService;
this.prefix = "My Address: "
}
printAddress() {
return Promise((resolve, reject) => {
addressService.getFullAddress((addr) => {
resolve(this.prefix + addr);
}, reject);
});
}
}

10. Directives
angular.module('myModule')
.directive('roar', function() {
return {
restrict: 'E',
scope: {
dino: '@'
},
template: '<p>I am a {{ getType }}, hear me ROAR!</p>',
link: function(scope) {
scope.getType = function() {
return scope.dino.species;
}
}
};
});

11. Directives
angular.module('myModule').directive('roar', function() {
return {
restrict: 'E',
scope: {},
controller: roarCtrl,
controllerAs: dinoRoar,
bindToController: {
dino: '@'
},
template: '<p>I am a {{ dinoRoar.getType }}, hear me ROAR!</p>'
};
function roarCtrl() {
this.getType = function() {
return this.dino.species;
};
}
});

12. Directives
angular.module('myModule').component('roar', function() {
return {
controller: roarCtrl,
bind: {
dino: '@'
},
template: '<p>I am a {{roar.getType }}, hear me ROAR!</p>'
};
function roarCtrl() {
this.getType = function() {
return this.dino.species;
};
}
});

13. Directives
@Component({
selector: “roar”,
bind:{
dino: ‘dino’
}
});
@Template({
inline: '<p>I am a {{roar.getType }}, hear me ROAR!</p>'
});
class roarCtrl() {
this.getType = function() {
return this.dino.species;
};
}

14. Templates
<ul>
<li *for="#todo of todos">
{{ todo }}
</li>
</ul>
<input #todotext (keyup)="doneTyping($event)">
<button (click)="addTodo(todotext.value)">Add Todo</button>
 templating idioms - generalized 35 directives

15. Materijali
 https://github.com/johnpapa/angular-styleguide

16. The end