Angular 2.0GETTING READY

What is Angular 2.0?

Total rewrite of AngularJS

In developer preview

Release date early 2016… maybe

What is different

No scope

No controller

No modules

No directives

Components

New template syntax

What is made of? 2014. AtScript

Traceour

2015. TypeScript 1.5

AtScript = TypeScript

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

How to prepare

ES6 (Traceur or TypeScript 1.5)

Angular 1.4 router

“Controller As” syntax

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; }; });

Servicesangular.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);

}); } }

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);

}); } }

Directivesangular.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; } } }; });

Directivesangular.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; }; } });

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; }; } });

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; }; }

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

Materijali

https://github.com/johnpapa/angular-styleguide

The end