AngularJS + Typescript用のyeomanのgenerator
May 13, 2013
この記事はQiitaの記事をエクスポートしたものです。内容が古くなっている可能性があります。
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', []);##詳細はこちらを参照
##ライセンス