No content

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

Tooling 

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

1. Generation • Libraries • Toolkits 

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

3. Generation • Complete Client Side • Applicaton Development 

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

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

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

No content

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

NPM • Package Manager • CLI Commands • Buildtool 

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

package.json Name und Version der Applikaton 

Typescript transpilieren und Lite-Server starten package.json 

Typescript Compiler einmal ausführen package.json 

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

Angular 2 Version package.json 

Universal dynamic module loader package.json 

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

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

Zu EcmaScript 5 Standard JavaScript Code transipilieren tsconfg.json 

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

Angular2 

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

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

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

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

import {Component} from 'angular2/core'; @Component({ selector: 'lw-app', template: ` ` }) 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 

Html-Tag component.ts import {Component} from 'angular2/core'; @Component({ selector: 'lw-app', template: ` ` }) 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"} ] } 

import {Component} from 'angular2/core'; @Component({ selector: 'lw-app', template: ` ` }) 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 

import {Component} from 'angular2/core'; @Component({ selector: 'lw-app', template: ` ` }) 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 

component.ts Binding import {Component} from 'angular2/core'; @Component({ selector: 'lw-app', template: ` ` }) 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 ngFor Binding •ngIf •ngSwitch •ngClass import {Component} from 'angular2/core'; @Component({ selector: 'lw-app', template: ` ` }) 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 ngFor Binding import {Component} from 'angular2/core'; @Component({ selector: 'lw-app', template: ` ` }) 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"} ] } 

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

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

component.ts import {Component} from 'angular2/core'; @Component({ selector: 'lw-app', template: ` ` }) 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 

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

import {Component} from 'angular2/core'; @Component({ selector: 'lw-app', template: ` ` }) 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 

import {Component} from 'angular2/core'; @Component({ selector: 'lw-app', template: ` ` }) 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' 

index.html bootstrapper.ts component.ts 

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

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

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

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 

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

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

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

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

main.ts @Component({ selector: 'lw-app', template: ` `, 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"; } 

main.ts @Component({ selector: 'lw-app', template: ` `, 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"; } 

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

detail.ts @Component({ selector: 'lw-version-detail', template: ` `, 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) } } 

detail.ts @Component({ selector: 'lw-version-detail', template: ` `, 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 •… 

/Detail/0 /Versions index.html SinglePageApplicaton 

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

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

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

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 

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 

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

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

No content