AngularJS

2016

AngularJS

2016

2

What's under the hood?

Typescript : Functionnalities

• Typed language
• Generics
• Classes - Interfaces - Inheritance 
• Modules
• Decorators
• TS > EcmaScript 2015(ES6) > Plain JS (ES5)

Typescript : Typing

var variableName: variableType = value;
let variableName2: variableType = value;
const variableName3: variableType = value;

Typescript : Typing

let isDone: boolean = false;

const height: number = 6;

let name: string = 'Carl';

let names: string[] = ['Carl', 'Laurent'];

let notSure: any = 4;

Typescript : Classes

class Person {
   constructor() {}
   speak:String() {return 'Yay';}
}

class Child extends Person {
   constructor() {super();}

   speak:String() {return 'Nay';}
}

let person:Person = new Child();

}

Typescript : A new language?

Angular

• 1.0 released in 2012
• 'Replaced' GWT as Front-End framework 
• Introduced/eased:
  • Easier data binding (two way)
  • Frontend testing

Angular : What was meh

app.directive('MyDirective', function(){
    return  {       
       restrict: 'AE',
       require: '?^^ngModel',
       scope: { variable: '@' },  
       controller: function(...) {},
       link: function(...) { ... }       
    }
});

Back to business

• Began in 2014
• Complete rewrite
• Released mid-september 2016
• Optimized for mobile devices

2

Component oriented

2

Directive => Component

app.directive('MyDirective', function(){
    return  {       
       restrict: 'AE',
       require: '?^^ngModel',
       scope: { variable: '@' },  
       controller: function(...) {},
       link: function(...) { ... }       
    }
});

Directive => Component

2

import { Component, Input} from '@angular/core'
@Component({
  selector: 'my-component',

   templateUrl: 'myComponent.html'
})
export class MyComponent {
  @Input() variable:string;
}

Angular 2
Syntax

Service => Class

//provider, factory, constant and value
app.service('Service', ['$http' function($http){
  var vm = this;
  vm.myMethod = function(){

  }
}]);

Service => Class

@Injectable()
export class AccountService {
  constructor(http){}

  getAccountByName(name: String){}
}

2

import { AccountService} from './AccountService'

@Component(...)

export class AccountDetailComponent {
  getAccount() { return this.accountService.getAccountByName('John'); }

  constructor(accountService:AccountService){}

}

Angular2 dep injection syntax based on Typescript

Data Binding

2

RFP with RXJS

2

Reactive Functionnal Programming

<input type="text" [ngFormControl]="term"/>

this.items = this.term.valueChanges
  .debounce(400)

  .map(term => term.trim())
  .distinctUntilChanged()
  .subscribe(term => this.wk.search(term));

Architecture

2

Possible to migrate?

2

1. Follow the Angular Style Guide : John Papa
2. Using a Module Loader
3. Migrate to TypeScript
4. Use Component Directives

https://angular.io/docs/ts/latest/guide/upgrade.html

Guidelines

2