using AngularJS with TypeScript
Upcoming SlideShare
Loading in...5
×
 

using AngularJS with TypeScript

on

  • 7,909 views

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.

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.

Statistics

Views

Total Views
7,909
Slideshare-icon Views on SlideShare
7,302
Embed Views
607

Actions

Likes
0
Downloads
25
Comments
0

8 Embeds 607

http://www.pichsenmeister.com 251
http://3x14159265.tumblr.com 201
http://www.slideee.com 81
http://localhost 47
http://discuss.dev.epek.com 15
http://forum.dev.epek.com 8
https://twitter.com 3
https://assets.txmblr.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    using AngularJS with TypeScript using AngularJS with TypeScript Presentation Transcript

    • 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