using AngularJS with TypeScript

47 %
53 %
Information about using AngularJS with TypeScript

Published on March 7, 2014

Author: 3x14159265



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.

using AngularJS with TypeScript by david pichsenmeister

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 package npm install -g typescript ● compiled with TypeScript compiler tsc 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 npm npm install -g tsd ● install definitions tsd query angular --resolve --action install


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


thanks! feel free to add me on: .../3x14159265

Add a comment

Related presentations

Related pages

Using TypeScript with AngularJS and Web API -

In this post I will show how to use TypeScript together with AngularJS and ASP.NET Web API to write a simple web application that implements a CRUD scenario.
Read more

Using AngularJS and TypeScript to Build Single Page ...

This article shows how to build Single Page Applications (SPA) using AngularJS and TypeScript and aims at providing a good understanding on implementing ...
Read more

AngularJS and TypeScript - Notebook Heavy

Lately, I’ve started using AngularJS instead of Knockout. Knockout.js is very popular in the .NET world, is very easy to use, and meshes well with .NET ...
Read more

Using TypeScript for Large AngularJS Applications ...

This course examines how to use TypeScript with a large AngularJS application and uncovers the positives and negatives along the way.
Read more

Getting started with TypeScript in AngularJS application ...

This article helps you get started with TypeScript in AngularJS ... We are going to build a very simple AngularJS application using TypeScript.
Read more

Using RequireJS with TypeScript and AngularJS - Stack Overflow

I'm about to rip my brains out trying to define an Angular module in TypeScript while using RequireJS. Have looked all over for a solution while spending ...
Read more

Strong Typing With AngularJS - Scott Logic Blog

Strong Typing With AngularJS By David ... on using AngularJS and TypeScript together with MVC and .NET also presents similar content together with ...
Read more

Are there any Typescript definitions for the AngularJS ui ...

I am using typescript with ui-router. Has anyone found any Typescript definitions for this. I looked on definately typed and could see nothing. Here is ...
Read more

angular.js - AngularJS bookviewer directive written with ...

AngularJS bookviewer directive written with Typescript and Angular-ui bootstrap. ... I used AngularJS+Typescript+Angular-UI ... Using Typescript in the ...
Read more