AngularJSとRequireJSを合わせて使ってみた

モジュール単位でファイルに分けたいかなーと思ったので、
AngularJS本家のチュートリアルのphonecatAppを題材にして、
AngularJS + RequireJS | StarterSquadを参考にちょっとアレンジ。

結果のソースはこちら
単体テストの実行と結合したソースをproduction.htmlで見れるところまで確認。

アプリの定義

phonecatApp.controllersにはPhoneListCtrlとPhoneDetailCtrlが入ってる。
phonecatApp.filtersにはcheckmark、
phonecatApp.servicesにはPhoneがそれぞれ入ってる。

app/assets/js/app.js

define([
  'angular',
  'angularRoute',
  'angularResource',
  './services/Phone',
  './filters/checkmark',
  './controllers/PhoneListCtrl',
  './controllers/PhoneDetailCtrl'
], function(angular) {

  'use strict';

  var phonecatApp = angular.module('phonecatApp', [
    'ngRoute',
    'phonecatApp.controllers',
    'phonecatApp.filters',
    'phonecatApp.services'
  ]);
  phonecatApp.config([
    '$routeProvider',
    function($routeProvider) {
      $routeProvider.
        when('/phones', {
        templateUrl: 'assets/js/templates/phone-list.html',
        controller: 'PhoneListCtrl'
      }).
        when('/phones/:phoneId', {
        templateUrl: 'assets/js/templates/phone-detail.html',
        controller: 'PhoneDetailCtrl'
      }).
        otherwise({
        redirectTo: '/phones'
      });
    }
  ]);
  return phonecatApp;
});

モジュール定義（例：コントローラ）

依存関係で読み込んでいるmodule（app/assets/js/controllers/module.js）がポイントになる。

app/assets/js/controllers/PhoneListCtrl.js

define([
  './module',
  '../services/Phone'
], function(controllers) {

  'use strict';

  return controllers.controller('PhoneListCtrl', [
    '$scope',
    'Phone',
    function($scope, Phone) {
      $scope.phones = Phone.query();
      $scope.orderProp = 'age';
    }
  ]);
});

moduleでphonecatApp.controllersを定義してコントローラを登録させる。
servicesとかも似たような感じで各まとまりでmodule作ってそこに登録させる。

app/assets/js/controllers/module.js

define([
  'angular',
], function(ng) {
  'use strict';
  return ng.module('phonecatApp.controllers', []);
});

アプリの起動

ng-appディレクティブだと間に合わないので、angular.bootstrapを使って手動でphonecatAppを実行する。

app/assets/js/bootstrap.js

require([
  'angular',
  'app'
], function(ng) {
  'use strict';

  ng.bootstrap(document, ['phonecatApp']);
});

感想

define、requireとangular.module両方で依存定義する必要があるので、ちょっと微妙。