by david pichsenmeister

using AngularJS with TypeScript

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

TypeScript

you can

● use existing JavaScript code

● incorporate popular JavaScript libraries

● call it from other JavaScript code

TypeScript

● can be installed as a node.js packagenpm install -g typescript

● compiled with TypeScript compilertsc helloworld.ts

● reference files with /// <reference path='path/to/file.ts' />

DefinitelyTyped

● repository for high-quality TypeScript type definitions

● type definitions for all common frameworks and libraries

● has its own package manager for definitions (tsd)

TSD - TypeScript Definition Manager

● install via npmnpm install -g tsd

● install definitionstsd query angular --resolve --action install

CODEhttps://github.com/3x14159265/angularTs

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' />

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'})

}])

}

model

/// <reference path='../_all.ts' />

module app {

'use strict'

export class ScaffoldModel {

constructor(){}

}

}

controller

/// <reference path='../_all.ts' />

module app {

'use strict'

export class ScaffoldCtrl {

public injection(): Array<any> {

return [

ScaffoldCtrl

]

}

constructor() {}

}

}

service

/// <reference path='../_all.ts' />

module app {

'use strict'

export class ScaffoldService {

public injection(): Array<any> {

return [

ScaffoldService

]

}

constructor() {}

}

}

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() }

]

}

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")

}

}

}

resourceshttp://www.typescriptlang.org/

http://angularjs.org/

http://nodejs.org/

https://github.com/borisyankov/DefinitelyTyped

http://definitelytyped.github.io/tsd/

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

thanks!feel free to add me on:

.../3x14159265