yo angular のtodoチュートリアルのエラー修正メモ

やりたかったこと：
http://yeoman.io/codelab.html#toc
http://angularjsninja.com/blog/2014/09/02/video-angularjs-app-with-yeoman/

yo angular ってかなーーーり情報でてるのに、エラーありすぎて鬱でした。"angular": "1.2.16"です。やったぶん面白い技術が知れたっぽいです。
エラー修正のメモだけです。おそらく次にyo angular使うときも出ると思うので、、、

エラー直し一覧

Gruntfile.js

    uglify: {
      options: {mangle: false},
      dist: {
        files: {
          '<%= yeoman.dist %>/scripts/scripts.js': [
            '<%= yeoman.dist %>/scripts/scripts.js'
          ]
        }
      }
    },

mangle options をfalse にすることで、grunt serve:dist の uglify で起こる unknown provider a 問題を解決。
unknown provider a 問題は、localStorageを導入してから起きた。

contorollers/main.js

angular.module('mytodoApp')
  .controller('MainCtrl', ['$scope', 'localStorageService', function ($scope, localStorageService) {

...

上のような際の問題がおきる部分を、名前が分かりやすいように書き換える。必要かどうかは不明だが、こっちのほうがいい。

scripts/app.js

angular
  .module('mytodoApp', [
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ui.sortable',
    'LocalStorageModule'
  ])

...

yo で最初に指定し忘れたモジュールは、「bower install --save @@@@@@@」で追加した後に、app.js を書き換えればおk。

index.html

<div ng-include="'views/main.html'"></div>

コントローラーがここに指定されていたが、main.html内部に書き換える。

main.html

<div class="container" ng-controller="MainCtrl">

...

こうすることで、共有されなかったスコープの問題を解決。

main.html

      <p class="input-group" ng-repeat="todo in todos track by $index" style="padding:5px 10px; cursor: move;">
        <input type="text" ng-model="todo" class="form-control" >
        <span class="input-group-btn">
          <button class="btn btn-danger" ng-click="removeTodo($index)" aria-label="Remove">X</button>
        </span>
      </p>

todo in todos track by $index とする必要があった(hazu)。
なかったら、form から関数で追加しようとするときに、同一 id のエラーみたいなのでたから困った(hazu)。