Yeoman generator for AngularJS


Yeoman

AngularJS 用 Yeoman ジェネレータ

Yeoman チームがベストプラクティスだと言っているプロジェクト構成を、AngularJS 用の Yeoman ジェネレータで実際に生成して確認する。

yo (Yeoman) と generator-angular をインストール

まず yo (Yeoman) をインストール。

1
npm install -g yo

次に、AngularJS 用の Yeoman ジェネレータ generator-angular をインストール。

1
npm install -g generator-angular

AngularJS プロジェクトを生成

新しいディレクトリを作って、そのディレクトリに移動。

1
mkdir my-new-project && cd $_

yo angular を実行(アプリケーション名を付けれる)。

1
yo angular [app-name]

で、Twitter Bootstrap を含めるか、SCSS を使うか、angular-resource.js, angular-cookies.js, angular-sanitiaze.js のモジュールを含めるかといった質問に答える。

すると、うお、そんなに?ってぐらいにターミナルが流れに流れて my-new-project ディレクトリに山ほどのサブディレクトリとファイルができている。

生成したプロジェクトの構成を確認

とりあえずプロジェクト構成のことだけに絞って、ここでは app ディレクトリの下を確認。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
app/
├── 404.html
├── bower_components
│   ├── angular
│   ├── angular-cookies
│   ├── angular-mocks
│   ├── angular-resource
│   ├── angular-sanitize
│   ├── angular-scenario
│   ├── bootstrap-sass
│   ├── es5-shim
│   ├── jquery
│   └── json3
├── favicon.ico
├── index.html
├── robots.txt
├── scripts
│   ├── app.js
│   └── controllers
│       └── main.js
├── styles
│   ├── bootstrap.css
│   └── main.css
└── views
    └── main.html

目新しいのは bower_components の存在。これは、パッケージマネジメントツール Bower でインストールするときにできるディレクトリの名前。Yeoman は Bower を使っている。

肝心の scripts ディレクトリの下がスッカスカなので、先に進む。

サブジェネレータでいろいろ生成

1
2
3
4
yo angular:controller myController
yo angular:directive myDirective
yo angular:filter myFilter
yo angular:service myService

これで、scripts ディレクトリはこうなる。

1
2
3
4
5
6
7
8
9
10
11
app/scripts/
├── app.js
├── controllers
│   ├── main.js
│   └── myController.js
├── directives
│   └── myDirective.js
├── filters
│   └── myFilter.js
└── services
    └── myService.js

プロジェクト構成のまとめ

ということで、やっぱり controller、directive、filter、service に分けて、あとはサブディレクトリを作るなり、細かく単機能ごとにファイルを分けていくということで。

ちなみに、どれだけファイルをバラして作ったとしても、Grunt でビルドすれば minify された 1 つの JS ファイルになるので心配ご無用!