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.

1. using AngularJS with
TypeScript
by david pichsenmeister

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. TypeScript
you can
● use existing JavaScript code
● incorporate popular JavaScript libraries
● call it from other JavaScript code

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. 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. TSD - TypeScript Definition
Manager
● install via npm
npm install -g tsd
● install definitions
tsd query angular --resolve --action
install

7. CODE
https://github.com/3x14159265/angularTs

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. 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. model
/// <reference path='../_all.ts' />
module app {
'use strict'
export class ScaffoldModel {
constructor(){}
}
}

11. controller
/// <reference path='../_all.ts' />
module app {
'use strict'
export class ScaffoldCtrl {
public injection(): Array<any> {
return [
ScaffoldCtrl
]
}
constructor() {}
}
}

12. service
/// <reference path='../_all.ts' />
module app {
'use strict'
export class ScaffoldService {
public injection(): Array<any> {
return [
ScaffoldService
]
}
constructor() {}
}
}

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. 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. 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. thanks!
feel free to add me on:
.../3x14159265