using AngularJS with TypeScript

42 %
58 %
Information about using AngularJS with TypeScript
Technology

Published on March 7, 2014

Author: 3x14159265

Source: slideshare.net

Description

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

CODE https://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") } } }

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

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

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...