With angular 2.0 being in developer preview, it’s a good time to take a sneak peek. To see what to expect and can you benefit from it join us at lecture by Ivan Varga at Axilis and find out.

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