Get together on getting more out of typescript & angular 2

1 of 38
GetTogether
Getting more out of TypeScript and
Angular 2
Ruben Haeck
28/03/2017

2 of 38
Agenda
• Intro
• TypeScript
• From AngularJS to Angular
• Demo

3 of 38
Intro
• Ruben Haeck
– Queaso Systems NV
– 11 jaar ervaring
– rh@queaso.be

4 of 38
Tools
• Visual Studio 2015/2017
– Belangrijk: Web Essentials
• o.a compilatie → TypeScipt, LESS, …
• Visual Studio Code (1.10.2)
• WebStorm
• Google Chrome
• Pluncker → https://plnkr.co

5 of 38
TypeScript
let’s go typed

6 of 38
TypeScript
• Meta language → JavaScript
• Compileert → JavaScript
• By Microsoft, open source
• Uitbreiding JavaScript
– Strongly typed class-based environment
• http://www.typescriptlang.org

9 of 38
Voordelen
• Handige → Large-scale JS applications
• Volgt de ECMAScript 6 standaard
• IDE ondersteuning
– Intellisense
• Compile-time type checking

10 of 38
Compile
• NodeJS
• Visual Studio 2015
– Plugin for TypeScript
– Web Essentials extension
• Andere
– TypeScript gecompileerd door TypeScript
• Client side by SystemJS
npm install –g typescript
tsc basics.ts
tsc basics.ts

11 of 38
TypeScript Fundamentals
• Basic types
• Variables
• Functions
– Declaration, overloading
• Interfaces
• Classes
– Constructors, Implemenation, Inheritance

12 of 38
• Generics
• Enums
• Namespaces
• Modules

13 of 38
• Basic types
– any
• Supertype of all types
• Als type niet is gekend → any
– Primitieve types
•number, string, boolean
• Opgelet: Object → interface!

14 of 38
• Array types
• Object type
• Void type
– Enkel als return type → functie
var names: string[]
var names: Array<string>
var car: { name: string, company: string};
car = { name: ‘BMW’, company: ‘Queaso
Systems’}
function logMe(text: string) : void {
console.log(text);
}

15 of 38
• Interfaces
interface IPerson {
name: string;
}
interface IQueasoEmployee extends IPerson {
happy: boolean;
age: number;
savePerson(person: IPerson): void;
}
multiple inheritance

16 of 38
• Classes
– Instance members
– Static members
– Access modifiers
– Constructors
– Interface implementation
– Class inheritance

17 of 38
class Employee {
// # constructor(s)
constructor(public name: string, public firstName: string,
public companyName: string){
}
public save(name: string,firstName: string) : string {
Employee.totalNumberOfEmployeeSaved += 1;
return this.name + ' '+ firstName + 'just saved ';
}
static totalNumberOfEmployeeSaved: number = 0;
}

18 of 38
var emp = new Employee('Haeck','Ruben','Queaso Systems');
emp.save('Wayne','Bruce');
// returns 'Haeck Bruce just saved'

19 of 38
• Access modifiers
– Public, private and protected
class Car {
public price: number;
private priceeWithVAT: number;
}

20 of 38
• Interface implementation
• Class inheritance
class Car implements ICar {
…
}
class SecretCar extends Car {
constructor(name: string, power: number, alias: string){
super(name, power);
}
}

21 of 38
From AngularJS to Angular

22 of 38
TypeScript
• Heel veel info
– https://www.typescriptlang.org/

23 of 38
Angular
• Sneller/Performant
• Eenvoudiger
• Response webdesign

24 of 38
Releases
2010
• Initiële (instabiele) release (0.9.0)
2012
• Release 1.1
• Initiële versie TypeScript (0.8.0)
2013
• Release 1.2 → Drop support IE6 & IE7
2014
• Release 1.3 → Drop support IE8
• Release TypeScript 1.1

25 of 38
Releases
07/2016
• Release 1.5.8 → Introductie “components”
09/2016
• Release 2.0 → “Angular”
• Release TypeScript 2.0 → introductie “@types/…”
2017
• Release 4
• Release 5
2018
• Release 6
• Release 7

26 of 38
Languages
• EcmaScript 5
• EcmaScript 6 (2015)
• TypeScript
• Dart
compile
types
JavaScript

27 of 38
Modules
AngularJS (JS) Angular (TS)
(function(){
// add third party libs
angular.module(‘app’,[]);
})();
<div ng-app=“app”>
…
</div>
import { BrowserModule } from '@angular/platform-
browser';
import { NgModule } from '@angular/core';
@NgModule({
imports: [
BrowserModule],
providers: […],
bootstrap: […]
})
export class AppModule { }

28 of 38
Controllers →
AngularJS (TS) Angular (TS)
class CompanyController {
name: string = ‘Queaso Systems’;
constructor() { }
}
angular.module(‘app’)
.controller(‘CompanyController’,
CompanyController);
<div ng-
controller=“CompanyController as
vm”>
{{ vm.name }}
</div>
import { BrowserModule } from '@angular/platform-
browser';
import { NgModule } from '@angular/core';
@Component({
selector: ‘company-card’,
template: ‘<h1>{{ company.name }}</h1>’
})
export class CompanyComponent {
company = { name: ‘Queaso Systems’, id: 1 };
}
<company-card></company-card>
Components

29 of 38
Built-in directives
AngularJS (HTML) Angular (HTML)
<table>
<tr ng-repeat=“e in
vm.employees” >
<td>{{ e.name }}</td>
</table>
<div ng-show=“vm.isEU”>
Is part of the EU!
</div>
<table>
<tr *ngFor=“e of employees”>
<td>{{ e.name }}</td>
</tr>
</table>
<div *ngIf=“isEU”>
Is part of the EU!
</div>

30 of 38
1 Way Binding
<h1 ng-bind=“vm.company.name”>
</h1>
<h1 [innerText]=“company.name”></h1>

31 of 38
Event Binding
<input type=“button”
ng-click=“vm.showDetail()”
value=“OK” />
(click)=“showDetail()”
value=“OK’ />

32 of 38
2 Way Binding
ng-model=“vm.company.name”
/>
[(ngModel)]=“company.name”
/>

33 of 38
Services
registraties
export class QueasoService {
constructor() { }
countEmployees(): number {
return 25;
}
}
angular.module(‘app’)
.service(‘QService’,
QueasoService);
@Injectable()
export class QueasoService {
countEmployees(): number {
return 25;
}
}

34 of 38
Services
resolving
class AppController {
static $inject = [‘QService’];
constructor(queasoService:
QueasoService){
let x = queasoService
.countEmployees();
}
}
@Component({ … })
class AppComponent {
constructor(queasoService: QueasoService) {
let x = queasoService.countEmployees();
}
}

35 of 38
Promise vs Observable
• Promise
– 1 value
– Not Cancelable
– Geen utility methodes
• Observable
– Superset van promises
– Meerdere values
– Cancelable
– Utility methods
• Streams

36 of 38
Services
Http
class QueasoDataService {
baseUrl = 'http://api.queaso.be
';
static $inject = ['$http'];
constructor(private $http: ang
ular.IHttpService){
}
getEmployees(): angular.IHttpP
romise<Array<Employee>> {
return this.$http
.get(this.baseUrl + '/employees'
);
}
}
Import { Http, Response } from ‘@angular/http’
@Injectable()
class QueasoDataService {
baseUrl = 'http://api.queaso.be';
constructor(http: Http) { }
getEmployees(): Observable<Array<Employee>> {
return this.http.get(this.baseUrl)
.map((result: Response) => result.json())
.catch((error: any) => Observable.throw(…));
}
}

37 of 38
Services
Http
class AppController {
employees: Array<Employee>;
static $inject = ['
QueasoDataService'];
constructor(private qService:
QueasoDataService){
qService.getEmployees().then(
(result: any) => {
employees = result.data
});
}
}
class AppComponent {
employees: Array<Employee>;
constructor(qService: QueasoDataService) {
qService.getEmployees().subscribe(
x => this.employees,
error => {
console.log(error);
});
}
}

38 of 38
• Demo
– angular-cli
– Spotify api

Get together on getting more out of typescript & angular 2

More Related Content

What's hot (7)

Viewers also liked (18)

Similar to Get together on getting more out of typescript & angular 2 (20)

Recently uploaded (20)