An Introduction to Angular2

Linux Tage Wien (Vienna, Austria)

source code: https://github.com/duffleit/LinuxWochen

Transcript

1. View Slide

2. dufeit
   Christoph Lindmaier
   christoph.lindmaier@techtalk.at
   David Leitner
   davidleitner@techtalk.at
   

   View Slide

3. Tooling
   

   View Slide

4. Entstehung von JS
   • 10 Tage
   • Brendan Eich
   • Standard durch ECMA
   • Laufzeitumgebung = Browser
   Mocha LiveScript
   

   View Slide

5. 1. Generation
   • Libraries
   • Toolkits
   

   View Slide

6. 2. Generation
   • Client-Side MVC
   • Applicaton Structure
   • Data Binding
   

   View Slide

7. 3. Generation
   • Complete Client Side
   • Applicaton Development
   

   View Slide

8. Google Javascript Frameworks
   • Angular 2 in Beta
   • Geschrieben in Typescript
   

   View Slide

9. Features Angular 2
   • Speed & Performance
   • Simple & Expressive
   • Cross Platorm
   • Routng
   • Dependency Injecton
   

   View Slide

10. AngularJS 1 -> Angular2
    • Ziele mit AngularJs 1 nicht erreichbar  Neues Framework
    • Binding
    • Dependency Injecton
    • Modularität
    • Performance
    

    View Slide

11. View Slide

12. Typescript
    • Open Source
    • Transpilieren zu JavaScript
    • Source Maps
    • Typen
    • Module
    • Typ Inferenz
    • Klassen, Interfaces
    

    View Slide

13. NPM
    • Package Manager
    • CLI Commands
    • Buildtool
    

    View Slide

14. Setup Angular 2
    • package.json
    • Angular 2 dependencies
    • Dev dependencies
    • tsconfg.json
    • Confg fle für Typescript
    

    View Slide

15. package.json
    Name und Version der Applikaton
    

    View Slide

16. Typescript transpilieren und Lite-Server
    starten
    package.json
    

    View Slide

17. Typescript Compiler einmal
    ausführen
    package.json
    

    View Slide

18. Typescript Compiler im
    Watch-Modus ausführen
    package.json
    

    View Slide

19. Angular 2 Version
    package.json
    

    View Slide

20. Universal dynamic module
    loader
    package.json
    

    View Slide

21. Diverse Bibliotheken die von
    Angular benötgt werden
    package.json
    

    View Slide

22. Dependencies die während
    der Entwicklung benötgt
    werden
    package.json
    

    View Slide

23. Zu EcmaScript 5 Standard
    JavaScript Code
    transipilieren
    tsconfg.json
    

    View Slide

24. Sourcemap ist Bindeglied
    zwischen JavaScript und
    TypeScript Code sehr
    hilfreich beim Debuggen
    tsconfg.json
    

    View Slide

25. Angular2
    

    View Slide

26. index.html
    bootstrapper.ts
    [METADATA]
    component.ts
    

    View Slide

27. 
    
    Angular 2 QuickStart
    
    
    
    
    
    <br/>System.config({<br/>packages: {<br/>app: {<br/>format: 'register',<br/>defaultExtension: 'js'<br/>}<br/>}<br/>});<br/>System.import('app/bootstrapper')<br/>.then(null, console.error.bind(console));<br/>
    
    
    Loading...
    
    
    Einstegspunkt für Angular Komponente
    index.html
    

    View Slide

28. index.html
    
    
    Angular 2 QuickStart
    
    
    
    
    
    
    <br/>System.config({<br/>packages: {<br/>app: {<br/>format: 'register',<br/>defaultExtension: 'js'<br/>}<br/>}<br/>});<br/>System.import('app/bootstrapper')<br/>.then(null, console.error.bind(console));<br/>
    
    
    Loading...
    
    
    SystemJS
    Module Loader
    System.import('module to import')
    C#: using
    JAVA: import
    

    View Slide

29. index.html
    import {bootstrap} from 'angular2/platform/browser';
    import {Main} from './lw.componente';
    bootstrap(Main);
    
    
    Angular 2 QuickStart
    
    
    
    
    
    
    <br/>System.config({<br/>packages: {<br/>app: {<br/>format: 'register',<br/>defaultExtension: 'js'<br/>}<br/>}<br/>});<br/>System.import('app/bootstrapper')<br/>.then(null, console.error.bind(console));<br/>
    
    
    Loading...
    
    
    bootstrapper.ts
    

    View Slide

30. import {Component} from 'angular2/core';
    @Component({
    selector: 'lw-app',
    template: `
    
    {{title}}
    
    
    {{version.name}}
    {{version.number}}
    
    
    
    `
    })
    export class Main {
    public title = "LinuxVersions";
    public versions = [
    { name: "Ubuntu", number: "1604"},
    { name: "Linux Mint", number: "17.3"},
    { name: "ElementaryOS", number: "0.3.2"},
    { name: "Fedora", number: "23"}
    ]
    }
    Decorator
    Component
    component.ts
    

    View Slide

31. Html-Tag
    component.ts
    import {Component} from 'angular2/core';
    @Component({
    selector: 'lw-app',
    template: `
    
    {{title}}
    
    
    {{version.name}}
    {{version.number}}
    
    
    
    `
    })
    export class Main {
    public title = "LinuxVersions";
    public versions = [
    { name: "Ubuntu", number: "1604"},
    { name: "Linux Mint", number: "17.3"},
    { name: "ElementaryOS", number: "0.3.2"},
    { name: "Fedora", number: "23"}
    ]
    }
    

    View Slide

32. import {Component} from 'angular2/core';
    @Component({
    selector: 'lw-app',
    template: `
    
    {{title}}
    
    
    {{version.name}}
    {{version.number}}
    
    
    
    `
    })
    export class Main {
    public title = "LinuxVersions";
    public versions = [
    { name: "Ubuntu", number: "1604"},
    { name: "Linux Mint", number: "17.3"},
    { name: "ElementaryOS", number: "0.3.2"},
    { name: "Fedora", number: "23"}
    ]
    }
    component.ts
    

    View Slide

33. import {Component} from 'angular2/core';
    @Component({
    selector: 'lw-app',
    template: `
    
    {{title}}
    
    
    {{version.name}}
    {{version.number}}
    
    
    
    `
    })
    export class Main {
    public title = "LinuxVersions";
    public versions = [
    { name: "Ubuntu", number: "1604"},
    { name: "Linux Mint", number: "17.3"},
    { name: "ElementaryOS", number: "0.3.2"},
    { name: "Fedora", number: "23"}
    ]
    }
    component.ts
    

    View Slide

34. component.ts
    Binding
    import {Component} from 'angular2/core';
    @Component({
    selector: 'lw-app',
    template: `
    
    {{title}}
    
    
    {{version.name}}
    {{version.number}}
    
    
    
    `
    })
    export class Main {
    public title = "LinuxVersions";
    public versions = [
    { name: "Ubuntu", number: "1604"},
    { name: "Linux Mint", number: "17.3"},
    { name: "ElementaryOS", number: "0.3.2"},
    { name: "Fedora", number: "23"}
    ]
    }
    

    View Slide

35. component.ts
    ngFor Binding
    •ngIf
    •ngSwitch
    •ngClass
    import {Component} from 'angular2/core';
    @Component({
    selector: 'lw-app',
    template: `
    
    {{title}}
    
    
    {{version.name}}
    {{version.number}}
    
    
    
    `
    })
    export class Main {
    public title = "LinuxVersions";
    public versions = [
    { name: "Ubuntu", number: "1604"},
    { name: "Linux Mint", number: "17.3"},
    { name: "ElementaryOS", number: "0.3.2"},
    { name: "Fedora", number: "23"}
    ]
    }
    

    View Slide

36. component.ts
    ngFor Binding
    import {Component} from 'angular2/core';
    @Component({
    selector: 'lw-app',
    template: `
    
    {{title}}
    
    
    {{version.name}}
    {{version.number}}
    
    
    
    `
    })
    export class Main {
    public title = "LinuxVersionen";
    public versions = [
    { name: "Ubuntu", number: "1604"},
    { name: "Linux Mint", number: "17.3"},
    { name: "ElementaryOS", number: "0.3.2"},
    { name: "Fedora", number: "23"}
    ]
    }
    

    View Slide

37. component.ts
    Method Binding
    import {Component} from 'angular2/core';
    @Component({
    selector: 'lw-app',
    template: `
    
    {{title}}
    
    
    `
    })
    export class Main {
    public title = "LinuxVersions";
    public addYear(){
    var currentYear = this.getCurrentYear();
    this.title = "LinuxVersion in " + currentYear;
    }
    private getCurrentYear() : number {
    return (new Date()).getFullYear();
    }
    }
    

    View Slide

38. component.ts
    import {Component} from 'angular2/core';
    @Component({
    selector: 'lw-app',
    template: `
    
    {{title}}
    
    
    `
    })
    export class Main {
    public title = "LinuxVersions";
    public addYear(){
    var currentYear = this.getCurrentYear();
    this.title = "LinuxVersion in " + currentYear;
    }
    private getCurrentYear() : number {
    return (new Date()).getFullYear();
    }
    }
    

    View Slide

39. component.ts
    import {Component} from 'angular2/core';
    @Component({
    selector: 'lw-app',
    template: `
    
    {{title}}
    
    
    
    `
    })
    export class Main {
    public title = "LinuxVersionen";
    public addYear(){
    var currentYear = this.getCurrentYear();
    this.title = "LinuxVersion in " + currentYear;
    }
    private getCurrentYear() : number {
    return (new Date()).getFullYear();
    }
    }
    Two-Way Binding
    

    View Slide

40. component.ts
    import {Component} from 'angular2/core';
    @Component({
    selector: 'lw-app',
    template: `
    
    {{title}}
    
    
    
    `
    })
    export class Main {
    public title = "LinuxVersionen";
    public addYear(){
    var currentYear = this.getCurrentYear();
    this.title = "LinuxVersion in " + currentYear;
    }
    private getCurrentYear() : number {
    return (new Date()).getFullYear();
    }
    }
    

    View Slide

41. import {Component} from 'angular2/core';
    @Component({
    selector: 'lw-app',
    template: `
    
    {{title}}
    
    
    {{version.name}}
    {{version.number}}
    
    
    
    `
    })
    export class Main {
    public title = "LinuxVersions";
    public versions = [
    { name: "Ubuntu", number: "1604"},
    { name: "Linux Mint", number: "17.3"},
    { name: "ElementaryOS", number: "0.3.2"},
    { name: "Fedora", number: "23"}
    ]
    }
    component.ts
    

    View Slide

42. import {Component} from 'angular2/core';
    @Component({
    selector: 'lw-app',
    template: `
    
    {{title}}
    
    
    {{version.name}}
    {{version.number}}
    
    
    
    `
    })
    export class Main {
    public title = "LinuxVersions";
    public versions = [
    { name: "Ubuntu", number: "1604"},
    { name: "Linux Mint", number: "17.3"},
    { name: "ElementaryOS", number: "0.3.2"},
    { name: "Fedora", number: "23"}
    ]
    }
    component.ts
    Template:
    templateUrl: 'pathToTemplate.html'
    

    View Slide

43. index.html
    bootstrapper.ts
    component.ts
    

    View Slide

44. index.html
    bootstrapper.ts
    component.ts
    service.ts
    [DI]
    

    View Slide

45. service.ts
    import {Injectable} from 'angular2/core'
    import {LinuxVersion} from "./linuxVersion";
    @Injectable()
    export class LinuxVersionService{
    private linuxVersions = [
    { name: "Ubuntu", number: "1604"},
    { name: "Linux Mint", number: "17.3"},
    { name: "ElementaryOS", number: "0.3.2"},
    { name: "Fedora", number: "23"}
    ]
    getCurrentLinuxVersions() : Array{
    //this would probably call a webservice
    return this.linuxVersions;
    }
    addLinuxVersion(name: string, version: string) : void {
    this.linuxVersions.push({
    name: name,
    number: version
    });
    }
    }
    

    View Slide

46. service.ts
    export interface LinuxVersion{
    name: string;
    number: string;
    }
    import {Injectable} from 'angular2/core'
    import {LinuxVersion} from "./linuxVersion";
    @Injectable()
    export class LinuxVersionService{
    private linuxVersions = [
    { name: "Ubuntu", number: "1604"},
    { name: "Linux Mint", number: "17.3"},
    { name: "ElementaryOS", number: "0.3.2"},
    { name: "Fedora", number: "23"}
    ]
    getCurrentLinuxVersions() : Array{
    //this would probably call a webservice
    return this.linuxVersions;
    }
    addLinuxVersion(name: string, version: string) : void {
    this.linuxVersions.push({
    name: name,
    number: version
    });
    }
    }
    

    View Slide

47. service.ts
    import {Injectable} from 'angular2/core'
    import {LinuxVersion} from "./linuxVersion";
    @Injectable()
    export class LinuxVersionService{
    private linuxVersions = [
    { name: "Ubuntu", number: "1604"},
    { name: "Linux Mint", number: "17.3"},
    { name: "ElementaryOS", number: "0.3.2"},
    { name: "Fedora", number: "23"}
    ]
    getCurrentLinuxVersions() : LinuxVersion[]{
    //this would probably call a webservice
    return this.linuxVersions;
    }
    addLinuxVersion(name: string, version: string) : void {
    this.linuxVersions.push({
    name: name,
    number: version
    });
    }
    }
    = Singleton
    

    View Slide

48. Component.ts
    import {Component} from 'angular2/core';
    import {LinuxVersionService} from "./LinuxVersionService";
    import {LinuxVersion} from "./linuxVersion";
    @Component({
    selector: 'lw-app',
    template: `
    
    
    {{version.name}}
    {{version.number}}
    
    
    `,
    providers: [LinuxVersionService]
    })
    export class Main {
    constructor(private _linuxVersionService: LinuxVersionService) { }
    get versions():Array {
    return this._linuxVersionService.getCurrentLinuxVersions();
    }
    }
    

    View Slide

49. import {Component} from 'angular2/core';
    import {LinuxVersionService} from "./LinuxVersionService";
    import {LinuxVersion} from "./linuxVersion";
    @Component({
    selector: 'lw-app',
    template: `
    
    
    {{version.name}}
    {{version.number}}
    
    
    `,
    providers: [LinuxVersionService]
    })
    export class Main {
    constructor(private _linuxVersionService: LinuxVersionService) { }
    get versions():Array {
    return this._linuxVersionService.getCurrentLinuxVersions();
    }
    }
    Component.ts
    versions : Array;
    get version(): Array {
    return ...
    }
    set version(): Array {
    ... = value;
    }
    

    View Slide

50. index.html
    bootstrapper.ts
    component.ts
    service.ts
    [DI]
    

    View Slide

51. index.html detail.ts
    service.ts
    [DI]
    master.ts
    /Master
    /
    Detail[id]
    bootstrapper.ts
    main.ts
    

    View Slide

52. main.ts
    @Component({
    selector: 'lw-app',
    template: `
    
    {{title}}
    
    
    `,
    directives: [ROUTER_DIRECTIVES],
    providers: [ROUTER_PROVIDERS]
    })
    @RouteConfig([
    {
    path: '/detail/:id',
    name: 'VersionDetail',
    component: VersionDetailComponent,
    },
    {
    path: '/versions',
    name: 'Versions',
    component: VersionsComponent,
    useAsDefault: true
    }
    ])
    export class Main {
    public title = "LinuxVersionen";
    }
    

    View Slide

53. main.ts
    @Component({
    selector: 'lw-app',
    template: `
    
    {{title}}
    
    
    `,
    directives: [ROUTER_DIRECTIVES],
    providers: [ROUTER_PROVIDERS]
    })
    @RouteConfig([
    {
    path: '/detail/:id',
    name: 'VersionDetail',
    component: VersionDetailComponent,
    },
    {
    path: '/versions',
    name: 'Versions',
    component: VersionsComponent,
    useAsDefault: true
    }
    ])
    export class Main {
    public title = "LinuxVersionen";
    }
    

    View Slide

54. master.ts
    @Component({
    selector: 'lw-versions',
    template: `
    
    
    {{version.number}}
    {{version.name}}
    get Details
    
    
    `,
    providers: [LinuxVersionService, ROUTER_PROVIDERS]
    })
    export class VersionsComponent {
    constructor(
    private _router : Router,
    private _linuxVersionService: LinuxVersionService
    ) { }
    get versions():Array {
    return this._linuxVersionService.getCurrentLinuxVersions();
    }
    getDetail(version: LinuxVersion) {
    this._router.navigate(['VersionDetail', { id: version.id }]);
    }
    }
    

    View Slide

55. detail.ts
    @Component({
    selector: 'lw-version-detail',
    template: `
    Name {{version.name}}
    Number {{version.number}}
    Id {{version.id}}
    `,
    providers: [LinuxVersionService]
    })
    export class VersionDetailComponent implements OnInit{
    version : LinuxVersion;
    constructor(private _linuxVersionService: LinuxVersionService,
    private _routeParams: RouteParams) { }
    ngOnInit() {
    let id = +this._routeParams.get('id');
    this.version = this._linuxVersionService.getLinuxVersion(id)
    }
    }
    

    View Slide

56. detail.ts
    @Component({
    selector: 'lw-version-detail',
    template: `
    Name {{version.name}}
    Number {{version.number}}
    Id {{version.id}}
    `,
    providers: [LinuxVersionService]
    })
    export class VersionDetailComponent implements OnInit{
    version : LinuxVersion;
    constructor(private _linuxVersionService: LinuxVersionService,
    private _routeParams: RouteParams) { }
    ngOnInit() {
    let id = this._routeParams.get('id');
    this.version = this._linuxVersionService.getLinuxVersion(id)
    }
    }
    Lifecycle Hooks:
    •ngOnInit
    •ngOnChanges
    •ngOnDestroy
    •ngAferViewInit
    •ngDoCheck
    •…
    

    View Slide

57. /Detail/0 /Versions
    index.html
    SinglePageApplicaton
    

    View Slide

58. index.html detail.ts
    service.ts
    [DI]
    master.ts
    /Master
    /
    Detail[id]
    bootstrapper.ts
    main.ts
    

    View Slide

59. index.html detail.ts
    service.ts
    [DI]
    master.ts
    /Master
    /
    Detail[id]
    bootstrapper.ts
    main.ts
    specs.ts
    Tests
    Test Runner
    

    View Slide

60. service.spec.ts
    import { LinuxVersionService } from '../app/linuxVersionService';
    import {describe, it, beforeEach, expect} from 'angular2/testing';
    describe('LinuxVersionService', () => {
    var linuxVersionService: LinuxVersionService = null;
    beforeEach(()=>{
    linuxVersionService = new LinuxVersionService();
    });
    it('can add linuxVersion', () => {
    let expectedVersionCount = linuxVersionService.getCurrentLinuxVersions().length + 1;
    linuxVersionService.addLinuxVersion('Debian', '8.4 Jessie');
    let actualVersionCount = linuxVersionService.getCurrentLinuxVersions().length;
    expect(actualVersionCount).toEqual(expectedVersionCount);
    });
    it('can find linuxVersionById', () => {
    let addedVersionId = linuxVersionService.addLinuxVersion('Debian', '8.4 Jessie');
    var linuxVersion = linuxVersionService.getLinuxVersion(addedVersionId);
    expect(linuxVersion.name).toEqual('Debian');
    expect(linuxVersion.number).toEqual('8.4 Jessie');
    });
    });
    

    View Slide

61. import { LinuxVersionService } from '../app/linuxVersionService';
    import {describe, it, beforeEach, expect} from 'angular2/testing';
    describe('LinuxVersionService', () => {
    var linuxVersionService: LinuxVersionService = null;
    beforeEach(()=>{
    linuxVersionService = new LinuxVersionService();
    });
    it('can add linuxVersion', () => {
    let expectedVersionCount = linuxVersionService.getCurrentLinuxVersions().length + 1;
    linuxVersionService.addLinuxVersion('Debian', '8.4 Jessie');
    let actualVersionCount = linuxVersionService.getCurrentLinuxVersions().length;
    expect(actualVersionCount).toEqual(expectedVersionCount);
    });
    it('can find linuxVersionById', () => {
    let addedVersionId = linuxVersionService.addLinuxVersion('Debian', '8.4 Jessie');
    var linuxVersion = linuxVersionService.getLinuxVersion(addedVersionId);
    expect(linuxVersion.name).toEqual('Debian');
    expect(linuxVersion.number).toEqual('8.4 Jessie');
    });
    });
    service.spec.ts
    

    View Slide

62. import { LinuxVersionService } from '../app/linuxVersionService';
    import {describe, it, beforeEach, expect} from 'angular2/testing';
    describe('LinuxVersionService', () => {
    var linuxVersionService: LinuxVersionService = null;
    beforeEach(()=>{
    linuxVersionService = new LinuxVersionService();
    });
    it('can add linuxVersion', () => {
    let expectedVersionCount = linuxVersionService.getCurrentLinuxVersions().length + 1;
    linuxVersionService.addLinuxVersion('Debian', '8.4 Jessie');
    let actualVersionCount = linuxVersionService.getCurrentLinuxVersions().length;
    expect(actualVersionCount).toEqual(expectedVersionCount);
    });
    it('can find linuxVersionById', () => {
    let addedVersionId = linuxVersionService.addLinuxVersion('Debian', '8.4 Jessie');
    var linuxVersion = linuxVersionService.getLinuxVersion(addedVersionId);
    expect(linuxVersion.name).toEqual('Debian');
    expect(linuxVersion.number).toEqual('8.4 Jessie');
    });
    });
    service.spec.ts
    

    View Slide

63. testrunner.html
    
    
    
    
    Ng App Unit Tests
    
    
    ...
    
    
    
    
    
    <br/>System.config({<br/>packages: {<br/>'app': {defaultExtension: 'js'}<br/>}<br/>});<br/>System.import('app/linuxVersionService.spec')<br/>.then(window.onload)<br/>.catch(console.error.bind(console));<br/>
    
    
    

    View Slide

64. index.html detail.ts
    service.ts
    [DI]
    master.ts
    /Master
    /
    Detail[id]
    bootstrapper.ts
    main.ts
    specs.ts
    Tests
    Test Runner
    

    View Slide

65. View Slide