[和訳]MEAN stack Yeoman Generator Tutorial #Node.js

これからMeanJS Yeoman Generatorについて学んでいきます。

MeanJSを始める方にとって最適のチュートリアルになると思います。またアプリの拡張についても簡単に触れようと思います。

まずはnpmを使ってジェネレータをインストールするところから始めましょう。

Yeoman Generatorのインストール

shell-command

% sudo npm install -g generator-meanjs

どのフォルダからでもジェネレータを動かせるように-gのグローバルオプションをつけています。

プロジェクトフォルダを作成

shell-command

% mkdir hunterhunter && cd hunterhunter

ハンターハンターのキャラクターを追加・表示するアプリを作るのでhunterhunterというフォルダを作りそのフォルダに移動しています。

アプリを生成

アプリを生成する準備ができました。

アプリに関する設定項目をいくつか選ぶ必要はありますが、アプリ生成のプロセスはとてもシンプルです。
YeomanジェネレータがMeanJSのテンプレートを作業フォルダ（ここではhunterhunter)にコピーしてくれます。

次のコマンドでジェネレータを走らせます。

shell-command

% 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コマンドを入力してアプリを立ち上げましょう。

shell-command

% grunt

これで、今回作るアプリを3000番ポートで受けれるようになります。
ブラウザで3000番ポート（アドレスバーに http://localhost:3000 を入力)にアクセスしてみてください。

すでにSignInとSignUpボタンが表示されていて使える状態になっています。
実際にはOAuth認証の設定をしないといけませんが、新規アカウントを作ってアプリを使えるようになっています。

アカウントの編集画面も使えるのでアカウントを作って編集画面を確認してみてください。

CRUDモジュールを追加

CRUDモジュールを追加していきましょう

crud-moduleのサブジェネレータを呼び出します。

shell-command

% 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というプロパティを追加します。

hunter.server.model.js(一部抜粋)

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というプロパティを追加します。

hunters.client.controller.js(一部抜粋)

// 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プロパティを表示するようにします。

create-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="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も変更します。

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を編集します。

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を編集します。

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サブジェネレータを使います。

shell-command

% yo meanjs:angular-controller team

ジェネレータを走らせるとこのコントローラがどのモジュールに属するのか質問されるので、今回はhunterを選びます。

? Which module does this controller belongs to? hunters

次はviewを生成します。

shell-command

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アプリ作成の流れをつかめる良チュートリアルです。