20
21

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

AngularJS + Typescript用のyeomanのgenerator

Last updated at Posted at 2013-05-13

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', []);

##詳細はこちらを参照

##ライセンス

BSDライセンス

20
21
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
20
21

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?