これからMeanJS Yeoman Generatorについて学んでいきます。
MeanJSを始める方にとって最適のチュートリアルになると思います。またアプリの拡張についても簡単に触れようと思います。
まずはnpmを使ってジェネレータをインストールするところから始めましょう。
Yeoman Generatorのインストール
% sudo npm install -g generator-meanjs
どのフォルダからでもジェネレータを動かせるように-gのグローバルオプションをつけています。
プロジェクトフォルダを作成
% mkdir hunterhunter && cd hunterhunter
ハンターハンターのキャラクターを追加・表示するアプリを作るのでhunterhunterというフォルダを作りそのフォルダに移動しています。
アプリを生成
アプリを生成する準備ができました。
アプリに関する設定項目をいくつか選ぶ必要はありますが、アプリ生成のプロセスはとてもシンプルです。
YeomanジェネレータがMeanJSのテンプレートを作業フォルダ（ここではhunterhunter)にコピーしてくれます。
次のコマンドでジェネレータを走らせます。
% yo meanjs
ジェネレータを走らせると以下のような質問が表示されます。太文字部分が自分で入力している箇所です。
articleというサンプルCRUDモジュールの自動生成は今回行わず後から別のジェネレータで生成します。
AngularJSモジュールはここでは全て選択(黒丸状態)しています。
[?] What would you like to call your application? HunterHunter
[?] How would you describe your application? (Full-Stack JavaScript with MongoDB, ? How would you describe your application? An App for Hunters
[?] How would you describe your application in comma seperated key words? (MongoDB? How would you describe your application in comma seperated key words? Hunter-Hunter, Nen, Gon, Killua
[?] What is your company/author name? Hunter
[?] Would you like to generate the article example CRUD module? N
[?] Which AngularJS modules would you like to include?
● ngCookies,
● ngAnimate,
● ngTouch,
● ngSanitize
アプリ起動
ターミナルでgruntコマンドを入力してアプリを立ち上げましょう。
% grunt
これで、今回作るアプリを3000番ポートで受けれるようになります。
ブラウザで3000番ポート（アドレスバーに http://localhost:3000 を入力)にアクセスしてみてください。
すでにSignInとSignUpボタンが表示されていて使える状態になっています。
実際にはOAuth認証の設定をしないといけませんが、新規アカウントを作ってアプリを使えるようになっています。
アカウントの編集画面も使えるのでアカウントを作って編集画面を確認してみてください。
CRUDモジュールを追加
CRUDモジュールを追加していきましょう
crud-moduleのサブジェネレータを呼び出します。
% yo meanjs:crud-module hunters
ここでもいくつか質問に答えます。
まず、angularモジュールに含めるフォルダ(public/modules/hunters内)を選びます。ここで作られるフォルダの中身は空です。
また、ここで作られるCRUDモジュールへのリンクをメニューとして追加するか、どのメニューに追加するかの質問に答えます。
ここでも、黒丸(●)の部分と太文字部分が自分で入力している箇所です。
? Which supplemental folders would you like to include in your angular module? (? Which supplemental folders would you like to include in your angular module?
● css
● img
● directives
● filters
? Would you like to add the CRUD module links to a menu? Yes
? What is your menu identifier(Leave it empty and press ENTER for the default "t? What is your menu identifier(Leave it empty and press ENTER for the default "topbar" menu)? Y
これで、ブラウザで http://localhost:3000 にアクセスし、ログインするとメニューにHuntersというボタンが追加されているので、New Hunterをクリックすると新規作成画面が表示されます。
登録したら一覧画面に遷移し、作ったHunterの削除や名前の編集ができることが確認できます。
modelを編集
ではHunterモデルを書き換えていきましょう。
app/models/hunter.server.model.jsファイルを開いてください。
この中にHunterSchemaがあります。
nenabilityというプロパティを追加します。
var HunterSchema = new Schema({
name: {
type: String,
default: '',
required: 'Please fill Hunter name',
trim: true
},
// ここから下を追加
nenability: {
type: String,
default: '',
trim: true
},
// ここまでが追加箇所
created: {
次はcontrollerを編集します。
コントローラのローカル変数にモデルの変更を反映するために
public/modules/hunters/controllers/hunters.client.controller.jsファイルを開いてnenabilityというプロパティを追加します。
// Create new Hunter
$scope.create = function() {
// Create new Hunter object
var hunter = new Hunters ({
name: this.name,
// この下の1行が追加部分
nenability: this.nenability
});
次にviewを変更します。
public/modules/hunters/views/create-hunter.client.view.htmlを開き、Hunterの作成画面に上で追加したnenabilityプロパティを表示するようにします。
<div class="form-group">
<label class="control-label" for="name">Name</label>
<div class="controls">
<input type="text" data-ng-model="name" id="name" class="form-control" placeholder="Name" required>
</div>
<!-- ここから下を追加 -->
<label class="control-label" for="nenability">念能力</label>
<div class="controls">
<input type="text" data-ng-model="nenability" id="nenability" class="form-control" placeholder="念能力" required>
</div>
<!-- ここまでが追加部分 -->
</div>
同じくpublic/modules/hunters/views/edit-hunter.client.view.htmlも変更します。
<div class="form-group">
<label class="control-label" for="name">Name</label>
<div class="controls">
<input type="text" data-ng-model="hunter.name" id="name" class="form-control" placeholder="Name" required>
</div>
<!-- ここから下を追加 -->
<label class="control-label" for="nenability">念能力</label>
<div class="controls">
<input type="text" data-ng-model="hunter.nenability" id="nenability" class="form-control" placeholder="念能力" required>
</div>
<!-- ここまでが追加部分 -->
</div>
次はリストの変更。
public/modules/hunters/views/list-hunters.client.view.htmlを編集します。
<h4 class="list-group-item-heading" data-ng-bind="hunter.name"></h4>
<!-- 下記1行を追加 -->
<h3 class="list-group-item-heading" data-ng-bind="hunter.nenability"></h3>
個別表示ページを変更。
public/modules/hunters/views/view-hunter.client.view.htmlを編集します。
<div class="page-header">
<h1 data-ng-bind="hunter.name"></h1>
</div>
<!-- 下記3行を追加 -->
<div class="page-content">
{{hunter.nenability}}
</div>
Angularのcontrollerとviewを追加
controllerとviewもmeanjsジェネレータを使います。
まずはcontrollerを生成するためにangular-controllerサブジェネレータを使います。
% yo meanjs:angular-controller team
ジェネレータを走らせるとこのコントローラがどのモジュールに属するのか質問されるので、今回はhunterを選びます。
? Which module does this controller belongs to? hunters
次はviewを生成します。
yo meanjs:angular-view team
ここで、teamというviewがどのモジュール、どのコントローラに属するのかを選択します。
また、生成されるviewに対するAngular側のルートを自動的に追加するかとパス名の決定の質問が表示されます。
? Which module does this view belongs to? hunters
? What is the name of the controller this view will use? Team
? Would you like to add a route for this view? Yes
? What is your view route path? team
テスト！
新しくhunterを追加し、編集、削除、リスト表示が問題なくできること、また、http://localhost:3000/#!/team にアクセスしてみて this is the Team と表示されればテスト成功です。
と、ここまでがYoutubeでのチュートリアルです。
若干メニューの表示が違ったりしていたりしますがこの通りにやれば一通りのCRUDアプリ作成の流れをつかめる良チュートリアルです。