yeomanを利用してangularjsのひな形を作って陥った罠

生成するとディレクトリ構成は以下のようになる。

一つ目に陥ったのがmodule名が長い場合、ひな形に自動で埋め込む時全て一致しない場合がある。
今回自分が陥ったのが、recordWhereAmInowAppという名前とrecordWhereAmINowAppの両方が生成されたのである。
index.htmlはrecordWhereAmINowAppだったが、app.jsとmain.jsはrecordWhereAmInowAppだった。
なのでgrunt serveするとページが白紙になる。
通常はこのとおり。

つまりNとnの違いで読み込みがされなくなる。
index.htmlがエントリーポイントみたいな感じなので基本は編集しないです。

次にyeomanが作るディレクトリに app/scripts/controllersの中にmain.jsとmain.coffeeが存在する。
自分はcoffeeはそんなにかけないのでmain.jsを編集するがどうもmain.htmlに反映されなくて悩んだ。

main.html

<div class="jumbotron">
  <h1>Hello {{world}}</h1>
  <h1>'Allo, 'Allo!</h1>
  <p>{{users.name}} {{users.score}}</p>

  <p class="lead">
    <img src="images/yeoman.png" alt="I'm Yeoman"><br>
    Always a pleasure scaffolding your apps.
  </p>
  <p><a class="btn btn-lg btn-success" ng-href="#">Splendid!<span class="glyphicon glyphicon-ok"></span></a></p>
</div>

main.js

'use strict';

angular.module('recordWhereAmInowApp')
  .controller('MainCtrl', function ($scope) {
    $scope.awesomeThings = [
      'HTML5 Boilerplate',
      'AngularJS',
      'Karma'
    ];
    $scope.world = 'test'
    $scope.users = {name: "about_hiroppy", score: 10000}
  });

と書いても変数部分はhtmlから消えてるだけである。(つまり空の状態)

これに数時間悩んだが、どうも .tmpの中身が変更されてない。
.tmpはコンパイルしたコードが置かれている場所だが、そこに自分の追加した

    $scope.world = 'test'
    $scope.users = {name: "about_hiroppy", score: 10000}

が存在しない。

つまりコンパイル先のコードに追加されていないことになる。

結果としてgruntはどうもmain.coffeeをコンパイルするらしく、main.coffeeに書いたら普通にうまくいった。
なぜmain.jsが生成されているのか実に疑問である。

以上が自分が陥った箇所である。