using AngularJS with TypeScript

44 %
56 %
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 - Piotr Walat

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

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

AngularJS Typescript Directive - Stack Overflow

AngularJS Directive using TypeScript to format input field. 0. ... Angularjs (Typescript) directive link function not firing. 1. AngularJS component ...
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 with TypeScript · GitHub

AngularJS with TypeScript Raw. ... Then using the NuGet ... make sure to install the AngularJS TypeScript definitely typed files which provides typed ...
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

Angular 2: Built on TypeScript | TypeScript

... been using typescript since November 2012… just love it. ... Congratulations to the TypeScript and AngularJS teams for pulling this off.
Read more

Typescript & AngularJS • TodoMVC

Mark all as complete. {{todo.title}} {{remainingCount}} All; Active; Completed; Clear completed
Read more

AngularJS — Superheroic JavaScript MVW Framework

AngularJS is what HTML would have been, had it been designed for building web-apps. Declarative templates with data-binding, MVW, MVVM, MVC ...
Read more