angular-fullstack
アプリケーションそのものを作るジェネレータ。angular-fullstack:appのエイリアス。
$ yo angular-fullstack
これ以外のジェネレータには、サーバサイドの機能を作るためのジェネレータと、クライアントサイドの機能を作るためのジェネレータ、そしてデプロイのためのジェネレータがある。
サーバサイド
angular-fullstack:endpoint
REST APIのエンドポイントを生成するジェネレータ。例えば、issueというリソースに対するREST APIのエンドポイントを定義する場合は、
$ yo angular-fullstack:endpoint issue
を実行する。すると、
? What will the url of your endpoint to be? /api/v1/issues
create server/api/issue/index.js
create server/api/issue/issue.controller.js
create server/api/issue/issue.model.js
create server/api/issue/issue.socket.js
create server/api/issue/issue.spec.js
となる。URLをどうするか聞かれるので、/api/v1/issuesと入力した。モデルやコントローラ、specファイルが生成される。
クライアントサイド
angular-fullstack:route
あるURLに対するクライアントサイドのリソース一式を生成するジェネレータ。例えば、/issuesというURLを有効にするために、
$ yo angular-fullstack:route issues
を実行すると、
? Where would you like to create this route? client/app/
? What will the url of your route be? /issues
create client/app/issues/issues.js
create client/app/issues/issues.controller.js
create client/app/issues/issues.controller.spec.js
create client/app/issues/issues.jade
create client/app/issues/issues.less
が得られる。
angular-fullstack:controller
クライアントサイドのコントローラを生成する。
$ yo angular-fullstack:controller chat
を実行すると、
? Where would you like to create this controller? client/app/
create client/app/chat/chat.controller.js
create client/app/chat/chat.controller.spec.js
が得られる。
angular-fullstack:directive
AngularJSのdirectiveを生成する。何らかのチャートを表示するためのディレクティブを作るとして、
$ yo angular-fullstack:directive chart
を実行すると、
? Where would you like to create this directive? client/app/
? Does this directive need an external html file? Yes
create client/app/chart/chart.directive.js
create client/app/chart/chart.directive.spec.js
create client/app/chart/chart.jade
create client/app/chart/chart.less
が得られる。
angular-fullstack:filter
filterって何だろう。AngularJS初心者なのでまだ知りません。
でも、
$ yo angular-fullstack:filter someFilter
を実行すると、filterのためのファイルを生成してくれる、と。
angular-fullstack:service
AngularJSのserviceを生成する。
例えば、issueというリソースに関するAPIを提供するサービスを作るとして、
$ yo angular-fullstack:service issue
を実行すると、
? Where would you like to create this service? client/components
create client/components/issue/issue.service.js
create client/components/issue/issue.service.spec.js
が得られる。同様に、angular-fullstack:factory、angular-fullstack:providerというgeneratorも存在していて、それぞれ、
// yo angular-fullstack:service issue
'use strict';
angular.module('teamApp')
.service('issue', function () {
// AngularJS will instantiate a singleton by calling "new" on this function
});
// yo angular-fullstack:factory issue
'use strict';
angular.module('teamApp')
.factory('issue', function () {
// Service logic
// ...
var meaningOfLife = 42;
// Public API here
return {
someMethod: function () {
return meaningOfLife;
}
};
});
// yo angular-fullstack:provider issue
'use strict';
angular.module('teamApp')
.provider('issue', function () {
// Private variables
var salutation = 'Hello';
// Private constructor
function Greeter() {
this.greet = function () {
return salutation;
};
}
// Public API for configuration
this.setSalutation = function (s) {
salutation = s;
};
// Method for instantiating
this.$get = function () {
return new Greeter();
};
});
を生成する。
angular-fullstack:decorator
公式サイトには
Generates an AngularJS service decorator.
とあるが、これもよくわかっていない。が、
yo angular-fullstack:decorator issue
を実行すると、
? Where would you like to create this decorator? client/components
create client/components/issue/issue.decorator.js
が得られ、
'use strict';
angular.module('teamApp')
.config(function ($provide) {
$provide.decorator('issue', function ($delegate) {
// decorate the $delegate
return $delegate;
});
});
が生成された。
デプロイ
デプロイのためのgeneratorとしては、
- yo angular-fullstack:openshift
- yo angular-fullstack:heroku
があって、それぞれOpenShift、Herokuへのデプロイを簡単に行うためのコマンドのようだが、今回は割愛。
終わりに
filterや、service decoratorなどAngularJSを理解していないと使い方がわからないものがあり、使いこなすにはもっと勉強しないと、と感じた。あとは、クライアントサイドのディレクトリ構成を意識するというか、戦略を持たないといけないな。
