kreediam
6/9/2015 - 4:16 PM

AngularJS with TypeScript 1.5 and ES6-Modules

AngularJS with TypeScript 1.5 and ES6-Modules

AngularJS with TypeScript 1.5 and ES6-Modules.md
content_copyfile_download
  • Rendered
  • Source

Requirements

  • Node
  • Typescript
  • Typescript Definition Manager
npm install -g typescript
npm install -g jspm
npm install -g tsd

Init project

1. Create new folder for your project

mkdir myProject
cd myProject

2. Init node project

npm init

You can go through all questions pressing enter.

3. Init jspm (JavaScript Package Manager)

jspm init

You can go through all questions pressing enter. (I preffer traceur as transpiler.)

4. Install AngularJS via jspm

jspm install angular

5. Install Type-Definitions for AngularJS via tdm (Type-Definitions Manager)

npm install -g tdm
tsd init
tdm query angular --resolve --action install --save

Create angular project files

1. src/DemoCtrl.ts

define(["require", "exports"], function (require, exports) {
    var DemoCtrl = (function () {
        function DemoCtrl() {
            this.message = "Hallo Welt";
        }
        return DemoCtrl;
    })();
    exports.DemoCtrl = DemoCtrl;
});

2. src/app.ts

/// <reference path="../typings/angularjs/angular.d.ts" />
import { DemoCtrl } from './DemoCtrl';
import * as angular from 'angular';
var app = angular.module('app', []);
app.controller('DemoCtrl', DemoCtrl);
angular.element(document).ready(() => {
    angular.bootstrap(document, ['app']);
});

3. index.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
<div ng-controller="DemoCtrl as demo">
    <h1>{{demo.message}}</h1>
</div>
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
    System.import('app/app').catch(console.error.bind(console));
</script>
</body>
</html>

Convert Typescript files

tsc src/*.ts --module 'amd' --outDir 'app'