YeomanのAngularJS Full-Stack generatorが提供するジェネレータ

AngularJS Full-Stack generatorは、アプリケーションのひな形だけでなく、アプリケーションの中身を開発する上で使えるジェネレータをいくつか提供しているってことに気づいたので纏めてみます。

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を理解していないと使い方がわからないものがあり、使いこなすにはもっと勉強しないと、と感じた。あとは、クライアントサイドのディレクトリ構成を意識するというか、戦略を持たないといけないな。