AngularJS & TypeScript: The Beginning of an awesome Friendship?

Do Angular and TypeScript play together nicely? This slide deck gives a very brief introduction to both and answers the question.

1. 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.
2. Who am I?  Senior Software System Architect at Siemens Building Technologies  Web Technology Fan  Open Source Lover  E-mail: kai.toedter@siemens.com  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.
3. Show Hands! 11/5/2016 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 3
4. 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.
5. 11/5/2016 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 5 TypeScript
6. 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
7. 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
8. 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
9. 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
10. www.typescriptlang.org 11/5/2016 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 10
11. Play! 11/5/2016 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 11
12. Definitely Typed 11/5/2016 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 12
13. (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
14. 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
15. 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
16. 11/5/2016 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 16
17. 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
18. Hello Angular <!doctype html> <html ng-app> <body> <div> <label>Name:</label> <input type="text" ng-model="yourName" placeholder="Enter a name here"> <hr> <h1>Hello {{yourName}}!</h1> </div> <script src="../../../bower_components/angular/angular.min.js"></script> </body> </html> 11/5/2016 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 18
19. 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
20. Loops + Filters <label>Search:</label> <input type="text" ng-model="search" placeholder="Enter search here"> <hr> <table ng-controller="ConferencesController"> <tr ng-repeat="conf in conferences | filter:search"> <td>{{conf.name}}</td> <td>{{conf.year}}</td> <td>{{conf.location}}</td> </tr> </table> 11/5/2016 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 20
21. Live Demo https://github.com/toedter/chatty 11/5/2016 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 21
22. AngularJS + TypeScript 11/5/2016 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 22
23. 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
24. 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
25. 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
26. 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
27. REST Resources (Model) module chatty.model { export interface User { id: string; email: string; fullName: string; } export interface UserResource extends User, ng.resource.IResource<User> { } export interface UsersResource extends ng.resource.IResourceClass<UserResource> { } } 11/5/2016 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 27
28. REST Resources (Factory) chatty.factories.factory('usersResource', ['$resource', ($resource: ng.resource.IResourceService) : chatty.model.UsersResource => { var usersResource:chatty.model.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
29. 11/5/2016 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 29 2 Preview
30. 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
31. Angular2 Preview import {Component, View, bootstrap} from 'angular2/angular2'; import {ServiceComponent} from './services/service'; @Component({ selector: 'my-app', viewInjector: [ServiceComponent] }) @View({ template: '<h1>Hello {{ name }}</h1><h1>Service: {{ serviceName }}</h1>' }) 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
32. 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
33. Conclusion 11/5/2016 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 33 AngularJS + TypeScript + AngularJS TypeDefinitions ------------------------------------- Good Friends!
34. 11/5/2016 © Kai Tödter, Licensed under a Creative Commons Attribution 4.0 International License. 34 Discussion
35. 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