TypeScript & AngularJS The Beginning of an awesome Friendship? Kai Tödter 11/5/2016 1 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License.

Who am I?  Senior Software System Architect at Siemens Building Technologies  Web Technology Fan  Open Source Lover  E-mail: [email protected]  Twitter: twitter.com/kaitoedter  Google+: gplus.to/toedter  Blog: toedter.com/blog 11/5/2016 2 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License.

Show Hands! 11/5/2016 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 3

Outline  TypeScript Introduction  AngularJS Introduction  TypeScript + AngularJS  Demos & Live Coding  Friends or Foes? 11/5/2016 4 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License.

11/5/2016 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 5 TypeScript

JavaScript? Many Java/OO developers don’t like JavaScript regarding writing larger applications. Some reasons are:  No static typing  No reliable code completion (only best guess)  Hard to refactor  Not object-oriented, especially  No structuring mechanisms like Interfaces, Classes, Modules  … 11/5/2016 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 6

Who fixes that?  Dart  Great language by Google: dartlang.org  Team has to learn new language  Either runs on Dart VM or compiles to JavaScript  CoffeeScript  Ruby-like, concise syntax  Compiles to JavaScript  coffescript.org  BabelJS  JavaScript compiler  babeljs.io  Traceur  JavaScript compiler  github.com/google/traceur-compiler 11/5/2016 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 7

TypeScript: Summary  Typed Superset of JavaScript  Almost all valid JavaScript is valid TypeScript*  Compiles to JavaScript  Provides optional static type checking at compile time  For most existing JavaScript libraries there are type definitions available  Provides Interfaces, Classes, Modules, Enums, Generics and more  Open Source: Apache 2.0 License  Created by Microsoft 11/5/2016 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 8

How to get started?  www.typescriptlang.org  Install node.js (nodejs.org)  Invoke “npm install –g typescript”  Compile a TypeScript file: “tsc myTypeScript.ts”  Results in “myTypeScript.js” 11/5/2016 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 9

www.typescriptlang.org 11/5/2016 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 10

Play! 11/5/2016 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 11

Definitely Typed 11/5/2016 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 12

(Internal) Modules and Interfaces module cdemo { export interface Contact { getFirstName(): string; getLastName(): string; getEMail(): string; } } 11/5/2016 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 13

Classes module cdemo { export class SimpleContact implements Contact { constructor(private firstName:string, private lastName:string, private email:string) { } getFirstName():string { return this.firstName; } 11/5/2016 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 14

Live Demo https://github.com/toedter/typescript-contacts-demo 11/5/2016 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 15

11/5/2016 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 16

AngularJS  Superheroic JavaScript MVW Framework  MVW = Model View Whatever   Modules, controllers, services, factories, …  Data binding  Created by Google  Much more… 11/5/2016 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 17

Hello Angular 11/5/2016 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 18

Module + Controller var myApp = angular.module('myApp',[]); myApp.controller('ConferencesController', ['$scope', function($scope) { $scope.conferences = [ {'name':'WJAX', 'year':'2014', 'location':'Munich'}, {'name':'OOP', 'year':'2015', 'location':'Munich'}, {'name':'JAX', 'year':'2015', 'location':'Munich'}, {'name':'JavaOne', 'year':'2015', 'location':'San Francisco'}, ]; }]); 11/5/2016 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 19

Loops + Filters Search:

---

{{conf.name}} {{conf.year}} {{conf.location}} 11/5/2016 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 20

Live Demo https://github.com/toedter/chatty 11/5/2016 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 21

AngularJS + TypeScript 11/5/2016 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 22

Use Type Definitions  From https://github.com/borisyankov/DefinitelyTyped/ tree/master/angularjs  angular.d.ts  angular-resource.d.ts  … 11/5/2016 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 23

Main App Structure module chatty { export var app = angular.module('chatty', ['chatty.factories', 'chatty.controllers', 'chatty.services']); export var factories = angular.module('chatty.factories', ['ngResource']); export var services = angular.module('chatty.services', ['chatty.factories']); export var controllers = angular.module('chatty.controllers', []); } 11/5/2016 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 24

Define your Own Scope interface ChattyScope extends ng.IScope { isConnected : boolean; userId : string; userEmail : string; userFullName : string; … } 11/5/2016 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 25

DI in TypeScript Classes module chatty { export class MainController { static $inject = ['$scope', 'chatty.userService']; constructor($scope:ChattyScope, userService:UserService) { $scope.isConnected = false; … 11/5/2016 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 26

REST Resources (Model) module chatty.model { export interface User { id: string; email: string; fullName: string; } export interface UserResource extends User, ng.resource.IResource { } export interface UsersResource extends ng.resource.IResourceClass { } } 11/5/2016 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 27

REST Resources (Factory) chatty.factories.factory('usersResource', ['$resource', ($resource: ng.resource.IResourceService) : chatty.model.UsersResource => { var usersResource:chatty.model.UsersResource = $resource('http://localhost:8080/chatty/api/users/:id'); return usersResource; }]); 11/5/2016 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 28

11/5/2016 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 29 2 Preview

Simple TypeScript Service Component export class ServiceComponent { private name: string; constructor() { this.name = 'test service'; } public getServiceName(): string { return this.name; } } 11/5/2016 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 30

Angular2 Preview import {Component, View, bootstrap} from 'angular2/angular2'; import {ServiceComponent} from './services/service'; @Component({ selector: 'my-app', viewInjector: [ServiceComponent] }) @View({ template: '

Hello {{ name }}

Service: {{ serviceName }}

' }) class AppComponent { private name: string; private serviceName: string; constructor(private service:ServiceComponent) { this.name = 'Kai'; this.serviceName = service.getServiceName(); } } bootstrap(AppComponent); 11/5/2016 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 31

Live Demo 11/5/2016 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 32 https://github.com/toedter/typescript-contacts-demo https://github.com/toedter/chatty https://github.com/toedter/webapp-tutorial https://github.com/toedter/angular2-typescript-demo

Conclusion 11/5/2016 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 33 AngularJS + TypeScript + AngularJS TypeDefinitions ------------------------------------- Good Friends!

11/5/2016 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 34 Discussion

License  This work is licensed under a Creative Commons Attribution 4.0 International License.  See http://creativecommons.org/licenses/by/4.0/ 11/5/2016 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 35