angularjs使用requirejs加载时，发现config里面配置的模块不能载入。

html

<div class='clearfix'>
        <div class="pull-right">
            <a class="btn btn-info" href="#/sendRecordsHistory">历史发送记录</a>
            <a class="btn btn-info" href="#/staticResourceList">所有静态资源列表</a>
        </div>
</div>
<div ui-view></div>

<script src="http://dev.74.com/client/bower_components/requirejs/require.js"  data-main="js/config.js"></script>

config.js

require.config({
    baseUrl:'http://dev.74.com/client',
    paths: {
        'angular': 'bower_components/angular/angular',
        'angularUiRouter': 'bower_components/angular-ui-router/release/angular-ui-router',
        'angularBootstrap': 'bower_components/angular-bootstrap/angular-bootstrap',
        'jquery': 'bower_components/jquery/dist/jquery',
        'bootstrap': 'bower_components/bootstrap/dist/js/bootstrap',
        'text': 'bower_components/text/text',  //requireJs加载非js资源库，这里主要是模板
        'routes':'src/js/ui-route',
        'routeConfig':'src/js/route-config',
    },
    shim: {
        'angular': {
            exports: 'angular'
        },
        'angularUiRouter': {
            deps: ['angular'],
            exports: 'angularUiRouter'
        },
        'angularBootstrap':{
            deps: ['angular'],
            exports: 'angularBootstrap'
        },
        /*'dependencyResolverFor':{
            deps: ['angular']
        },*/
        'bootstrap': {
            deps: ['jquery']
        },
        'jquery':{
            exports: 'jquery'
        }
    },
    config: {
        text: {
            //初始化非js资源加载
            useXhr: function (url, protocol, hostname, port) {
                return true;
            }
        }
    }
});

require(['routeConfig'], function(routeConfig) {
        angular.bootstrap(document, ['app']);
    }
);

route-config.js

define(['angular', 'angularUiRouter', 'require'], function (angular, angularUiRouter, require) {
    var app = angular.module('app', ['ui.router']);

    app.config(['$stateProvider', '$urlRouterProvider', '$controllerProvider', function ($stateProvider, $urlRouterProvider, $controllerProvider) {
        /// 错误的路由重定向  $urlRouterProvider
        $urlRouterProvider.otherwise('/svnInit');
        //初始化router
        $stateProvider
            //:title和/:name是设置$routeParams里的值
            .state('svnInit', {
                url: '/svnInit',
                templateUrl: 'http://dev.74.com/client/src/views/crm-init.html',
                controller: 'InitController',
                resolve: {
                    /*
                     这个key值会被注入到controller中，对应的是后边这个function返回的值，或者promise最终resolve的值。函数的参数是所需的服务，angular会根据参数名自动注入
                     对应controller写法（注意keyName）：
                     controllers.controller('module2Controller', ['$scope', '$http', 'keyName',
                     function($scope, $http, keyName) {
                     }]);
                     */
                    keyName: function ($q) {
                        var deferred = $q.defer();
                        require(['js/controllers/init-controller.js'], function (controller) {
                            $controllerProvider.register('InitController', controller);                         //由于是动态加载的controller，所以要先注册，再使用
                            deferred.resolve();
                        });
                        return deferred.promise;
                    }
                }
            })

    }]);
    return app;
});

initController.js

define(['routeConfig'], function(routeConfig) {
    //这里报错了。 Uncaught ReferenceError: app is not defined
    //我已经在routeConfig返回了app，那么为什么这里app没有定义？
    app.controller('InitController', ['$scope', function($scope) {
        $scope.page = {
            heading: 'About Us'
        };
    }]);
});

多谢指点

---

因为angular本身不支持使用require加载, 如果需要使用的话, 需要对angular进行一些hack.

angular期望的加载方式是, 在页面初始化之前就把所有的controller service directive等全部加载完毕. 使用异步方式加载的文件, angular都会忽略.

这种方式虽然简单, 但是对于页面非常多, 确实需要使用异步加载的应用就很麻烦. 我在公司的项目中也遇到了这个情况, 所以查了资料后, 写了一个模块.

http://github.com/treri/angular-require

目前使用没有什么问题. 你可以看看

---

不要使用app.controller来定义了controller。需要使用angular.module('appxxx').controller，这样就可以找到module了。如果你一定要使用app的话，就得使用appconfigmodule.app了，因为app是属于一个模块内部的，你在另一个模块用全局变量的方法很定引用不到的。推荐第一种方法，使用了angular的依赖注入。

手机回的，你前面的module，controller的名字记不大清了

---

定义Controller:

define([], function() {
  function sampleController($scope) {
    $scope.sample = 'Todo List';
  }

  sampleController.$inject=['$scope'];

  return sampleController;
});

使用controller

define(['app/config',
  'app/sampleController'],

  function(config, sampleController){
    var app = angular.module('ideasApp', ['ngRoute','ngResource','ngGrid']);
    app.config(config);
    app.controller('sampleController', sampleController);
});