AngularJS

2016

AngularJS

2016

2

What's under the hood?

Typescript : A new language?

Typescript : Functionnalities

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

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 = new Child();

}

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

Service => Class

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

  }
});

Service => Class

@Injectable()
export class Service {
  myMethod(){}
}

2

Data Binding

2

Angular Universal

Server side rendering of an Angular app

Great for SEO

Faster first page display 

RFP with RXJS

2

Reactive Functional Programming

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

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

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

RFP with RXJS

2

Reactive Functional Programming

getDataFromNetwork()
    .debounce(300)
    .filter (rep1 => rep1 != null)
    .flatMap(rep1 => getDateFromAnotherRequest(rep1))
    .map(rep2 => `${rep2} transformed`)
    .subscribe(value => console.log(`next => ${value}`))

Events, HTTP calls are observables!

Architecture

2

Possible to migrate?

2

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

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