$30 off During Our Annual Pro Sale. View Details »

An Introduction to Angular2

An Introduction to Angular2

Linux Tage Wien (Vienna, Austria)

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

SQUER Solutions

April 30, 2016
Tweet

More Decks by SQUER Solutions

Other Decks in Technology

Transcript

  1. View Slide

  2. dufeit
    Christoph Lindmaier
    [email protected]
    David Leitner
    [email protected]

    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