【AngularJS+RequireJS】(メモ) コントローラの自動ロード

app.js

/**
 * モジュール生成、構成
 */
define(['angular', 'jquery'], function() {
    // AngularJS起動
    var module = angular.module('SampleApp', []);

    return module;
});

SampleController.js

/**
 * SampleController
 */
define(['angular', 'jquery', 'app'], function(ng, jq, module) {

    module.controller('SampleController', function($scope) {
        $scope.hoge = "Hoge";
        $scope.foo  = "foo";
    });
});

load.js

/**
 * RequireJS 設定
 */
require.config({
    baseUrl: '../',
    paths: {
        // モジュール
        angular: 'bower_components/angular/angular.min',
        jquery:  'bower_components/jquery/dist/jquery.min',

        // アプリケーション
        app: 'app/app',
        SampleController: 'app/controllers/SampleController',
    },
    shim: {
        // モジュール
        jquery: {deps: ["angular"]},

        // アプリケーション
        app: {deps: ["angular", "jquery"]},
        MasterDetailController: {deps: ["app"]},
    },
});

/**
 * ロード処理
 */
require(['angular', 'jquery'], function() {
    // 各モジュールをロード、DOMのロード完了後に…
    $(function() {
        // ng-ontrollerの属性値（コントローラ名）を取得する
        var controllerName = $('[ng-controller]').attr('ng-controller');
        // コントローラ名に該当するjsファイルをロード
        require(['app', controllerName], function(module){
            // モジュールの紐付け（※RequireJSではngAppだとタイミングが間に合わない）
            angular.bootstrap(document, ['SampleApp']);
        });
    });
});