using AngularJS with TypeScript

18,015 views
17,278 views

Published on

A short introduction, how to use the AngularJS Framework with the trending language TypeScript. It includes a short intro to TypeScript, DefinitelyTyped and of course some example code.

Published in: Technology

using AngularJS with TypeScript

  1. 1. using AngularJS with TypeScript by david pichsenmeister
  2. 2. TypeScript ● TypeScript is a typed superset of JavaScript that compiles to plain JavaScript (ECMAScript3-compatible). ● TypeScript adds optional types, classes, modules and generics ● (only) compile-time type checking
  3. 3. TypeScript you can ● use existing JavaScript code ● incorporate popular JavaScript libraries ● call it from other JavaScript code
  4. 4. TypeScript ● can be installed as a node.js package npm install -g typescript ● compiled with TypeScript compiler tsc helloworld.ts ● reference files with /// <reference path='path/to/file.ts' />
  5. 5. DefinitelyTyped ● repository for high-quality TypeScript type definitions ● type definitions for all common frameworks and libraries ● has its own package manager for definitions (tsd)
  6. 6. TSD - TypeScript Definition Manager ● install via npm npm install -g tsd ● install definitions tsd query angular --resolve --action install
  7. 7. CODE https://github.com/3x14159265/angularTs
  8. 8. reference all files /// <reference path='typings/jquery/jquery.d.ts' /> /// <reference path='typings/angularjs/angular.d.ts' /> /// <reference path='typings/angularjs/angular-route.d.ts' /> //##### models ##### /// <reference path='models/ScaffoldModel.ts' /> //##### services ##### /// <reference path='services/ScaffoldService.ts' /> //##### directives ##### /// <reference path='directives/ScaffoldDirective.ts' /> //##### controllers ##### /// <reference path='controllers/ScaffoldCtrl.ts' /> /// <reference path='app.ts' />
  9. 9. app.ts /// <reference path='_all.ts' /> module app { 'use strict' var myapp: ng.IModule = angular.module( 'app', ['ngRoute']) myapp.controller( 'ctrl', ScaffoldCtrl.prototype.injection()) myapp.service( 'service', ScaffoldService.prototype.injection()) myapp.directive( 'directive' , ScaffoldDirective.prototype.injection()) myapp.config([ '$routeProvider' , function( $routeProvider: ng.route. IRouteProvider ) { $routeProvider.when( '/home', {templateUrl: 'partials/home. html'}). otherwise({redirectTo: '/home'}) }]) }
  10. 10. model /// <reference path='../_all.ts' /> module app { 'use strict' export class ScaffoldModel { constructor(){} } }
  11. 11. controller /// <reference path='../_all.ts' /> module app { 'use strict' export class ScaffoldCtrl { public injection(): Array<any> { return [ ScaffoldCtrl ] } constructor() {} } }
  12. 12. service /// <reference path='../_all.ts' /> module app { 'use strict' export class ScaffoldService { public injection(): Array<any> { return [ ScaffoldService ] } constructor() {} } }
  13. 13. directive 1/2 /// <reference path='../_all.ts' /> module app { 'use strict' export class ScaffoldDirective implements ng.IDirective { public injection(): Array<any> { return [ () => { return new ScaffoldDirective() } ] }
  14. 14. directive 2/2 public templateUrl: string public restrict: string constructor() { this.templateUrl = 'partials/templates/directive.html' this.restrict = 'E' } public link ($scope: ng.IScope, element: JQuery, attributes: ng.IAttributes): void { element.text( "i'm a directive") } } }
  15. 15. resources http://www.typescriptlang.org/ http://angularjs.org/ http://nodejs.org/ https://github.com/borisyankov/DefinitelyTyped http://definitelytyped.github.io/tsd/ https://github.com/3x14159265/angularTs
  16. 16. thanks! feel free to add me on: .../3x14159265

×