JakubMrozek/generator-angular-typescriptというgeneratorがある。
基本的にreadme.mdに書いてある通りにすれば動く。
「grunt server」を実行した際に、「components/types/angularjs/angular.d.ts:88」でエラーが出る場合は、
directive(name: string, directiveFactory: (...params)=> IDirective): IModule;
を
directive(name: string, directiveFactory: (...params: any[])=> IDirective): IModule;
に変更すれば良い。
以下チェコ語か何かで書かれたreadme.mdを頑張って和訳したもの。
インストール方法
npm install yo grunt-cli bower testacular -g
npm install git://github.com/JakubMrozek/generator-angular-typescript.git
yo angular
npm install && bower install
コマンド
- grunt server - 開発を始める
- grunt test - すべてのテストを実行する
- grunt testacular:unit - 自動リフレッシュで単体テストを行なうために、Testacularを開始する
- grunt build - プロジェクトをビルドする（ミニファイや最適化など）
基本的な使い方
コントローラ、ディレクティブ、フィルターおよびサービスとそのテストの生成方法。
コントローラ
生成方法：
yo angular:controller Ctrl
生成される app/scripts/controllers/ctrl.ts:
/// <reference path="../app.ts" />
'use strict';
module app.controller {
export class Ctrl implements IController {
constructor (private $scope) {
}
}
}
app.registerController('Ctrl', ['$scope']);
ディレクティブ
生成方法：
yo angular:directive dir
生成される app/scripts/directives/dir.ts:
/// <reference path="../app.ts" />
'use strict';
module app.directive {
export class Dir implements IDirective {
template = '<div></div>';
restrict = 'E';
link (scope, element: JQuery, attrs: ng.IAttributes) {
element.text('this is the dir directive');
}
}
}
app.registerDirective('Dir', []);
フィルター
生成方法：
yo angular:filter fil
生成される app/scripts/filters/fil.ts:
/// <reference path="../app.ts" />
'use strict';
module app.filter {
export class Fil implements IFilter {
filter (input: string) {
return 'fil filter: ' + input;
}
}
}
app.registerFilter('Fil', []);
サービス
生成方法：
yo angular:service serv
生成される app/scripts/services/serv.ts:
/// <reference path="../app.ts" />
'use strict';
module app.service {
export class Serv implements IService {
private meaningOfLife = 42;
constructor () {
}
someMethod () {
return this.meaningOfLife;
}
}
}
app.registerService('Serv', []);