Upgrade to Pro — share decks privately, control downloads, hide ads and more …

AngularJS & TypeScript: The Beginning of an awe...

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.

Kai Toedter

July 29, 2015
Tweet

More Decks by Kai Toedter

Other Decks in Technology

Transcript

  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: [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.
  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. 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
  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
  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
  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
  9. Play! 11/5/2016 © Kai Tödter, Licensed under a Creative Commons

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

    Commons Attribution 4.0 International License. 12
  11. (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
  12. 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
  13. 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
  14. 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
  15. 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
  16. 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
  17. Live Demo https://github.com/toedter/chatty 11/5/2016 © Kai Tödter, Licensed under a

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

    Creative Commons Attribution 4.0 International License. 22
  19. 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
  20. 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
  21. 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
  22. 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
  23. 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
  24. 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
  25. 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
  26. 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
  27. 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
  28. Conclusion 11/5/2016 © Kai Tödter, Licensed under a Creative Commons

    Attribution 4.0 International License. 33 AngularJS + TypeScript + AngularJS TypeDefinitions ------------------------------------- Good Friends!
  29. 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