Angularjs 无法实例化模块

我试图使用角度要求

我目前得到的错误

Failed to instantiate module

异常url开始

http://errors.angularjs.org/undefined/$injector/modulerr?

当我使用chrome开发工具查看我的源代码并展开脚本文件夹时，出错时唯一存在的文件是app/main.js。文件夹中的任何内容：控制器、模块或路由均不存在。这将使我相信这是一个过早注射的案例（不是一个真正的术语）

我已经尝试了一些方法来减缓注射速度，直到正确的时间，但都没有效果

初试

require(['jquery', 'angular', 'app/modules/app'], function ($, angular, app) {
     $(function () { // using jQuery because it will run this even if DOM load already happened
           angular.bootstrap(document, ['app']);
     });
});

第二次尝试

 require(['angular', 'app/modules/app'], function (angular, app) {
    var $html = angular.element(document.getElementsByTagName('html')[0]);
    angular.element().ready(function () {
        $html.addClass('ng-app');
        angular.bootstrap($html, [app.name]);
    });
 });

第三次尝试

  require(['angular', 'app/modules/app'], function (angular, app) {
     require(['Scripts/app/modules/app.js', 'Scripts/app/controller/controllers.js'],    function (app) {
          angular.bootstrap(document.body, [app]);
     })

  });

乌德帕特

main.js

  require.config({
    baseUrl: '/Scripts/',
    urlArgs: "bust=" + (new Date()).getTime(),
    paths: {
            'jquery': 'lib/require-jquery',
            'angular': 'lib/angular/angular.min',
            'angular-resource': 'lib/angular/angular-resource.min',
    },

    shim: {
            'angular': { 'exports': 'angular' },
            'angular-resource': { deps: ['angular'] },
            'jQuery': { 'exports': 'jQuery' },
    }
 });

 require(['jquery', 'angular', 'app/modules/app'], function ($, angular, app) {
    //the above methods go here
 });

require.config({
    baseUrl: '/Scripts/',
    urlArgs: "bust=" + (new Date()).getTime(),
    paths: {
        'jquery': 'lib/require-jquery',
        'angular': 'lib/angular/angular.min',
        'angular-resource': 'lib/angular/angular-resource.min'
    },
    shim: {
        'angular': { 'exports': 'angular' },
        'angular-resource': { deps: ['angular'] },
        'jQuery': { 'exports': 'jQuery' },
        'app/modules/app': 'angular'
    },
    dep: ['app']
});

require(['jquery', 'angular', 'app/modules/app'], function ($, angular, app) {
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['app']);
    });
});

更新2

app.js

define([
        'angular',
        'app/controllers/controller',
        'lib/angular/angular-route'
], function (angular, controllers) {
    'use strict';

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

main.js

  require.config({
    baseUrl: '/Scripts/',
    urlArgs: "bust=" + (new Date()).getTime(),
    paths: {
            'jquery': 'lib/require-jquery',
            'angular': 'lib/angular/angular.min',
            'angular-resource': 'lib/angular/angular-resource.min',
    },

    shim: {
            'angular': { 'exports': 'angular' },
            'angular-resource': { deps: ['angular'] },
            'jQuery': { 'exports': 'jQuery' },
    }
 });

 require(['jquery', 'angular', 'app/modules/app'], function ($, angular, app) {
    //the above methods go here
 });

require.config({
    baseUrl: '/Scripts/',
    urlArgs: "bust=" + (new Date()).getTime(),
    paths: {
        'jquery': 'lib/require-jquery',
        'angular': 'lib/angular/angular.min',
        'angular-resource': 'lib/angular/angular-resource.min'
    },
    shim: {
        'angular': { 'exports': 'angular' },
        'angular-resource': { deps: ['angular'] },
        'jQuery': { 'exports': 'jQuery' },
        'app/modules/app': 'angular'
    },
    dep: ['app']
});

require(['jquery', 'angular', 'app/modules/app'], function ($, angular, app) {
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['app']);
    });
});

---

根据更新2，

main.js

和

app.js

应该是：

main.js

require.config({
    baseUrl: '/Scripts/',
    urlArgs: "bust=" + (new Date()).getTime(),
    paths: {
        'app': 'app/modules/app',
        'jquery': 'lib/require-jquery',
        'angular': 'lib/angular/angular.min',
        'angular-resource': 'lib/angular/angular-resource.min'
    },
    shim: {
        'app': ['angular','angular-resource'],
        'angular-resource': ['angular']
    },
    dep: ['app']
});

define(['app/controllers/controller'], function (controllers) {
    'use strict';

    var app = angular.module('app', [
            'app.controllers'
    ]);
    app.config(['$routeProvider', function ($routeProvider) {
        $routeProvider.
          when('/phones', {
            templateUrl: 'Templates/phone-list.html',
            controller: 'PhoneListCtrl'
          }).
          when('/phones/:phoneId', {
            templateUrl: 'Templates/phone-detail.html',
            controller: 'PhoneDetailCtrl'
          }).
          otherwise({
            redirectTo: '/phones'
          });
    }]);

    angular.element(document).ready(function () {
        angular.bootstrap(document, ['app']);
    });

    return app;
});

app.js

require.config({
    baseUrl: '/Scripts/',
    urlArgs: "bust=" + (new Date()).getTime(),
    paths: {
        'app': 'app/modules/app',
        'jquery': 'lib/require-jquery',
        'angular': 'lib/angular/angular.min',
        'angular-resource': 'lib/angular/angular-resource.min'
    },
    shim: {
        'app': ['angular','angular-resource'],
        'angular-resource': ['angular']
    },
    dep: ['app']
});

define(['app/controllers/controller'], function (controllers) {
    'use strict';

    var app = angular.module('app', [
            'app.controllers'
    ]);
    app.config(['$routeProvider', function ($routeProvider) {
        $routeProvider.
          when('/phones', {
            templateUrl: 'Templates/phone-list.html',
            controller: 'PhoneListCtrl'
          }).
          when('/phones/:phoneId', {
            templateUrl: 'Templates/phone-detail.html',
            controller: 'PhoneDetailCtrl'
          }).
          otherwise({
            redirectTo: '/phones'
          });
    }]);

    angular.element(document).ready(function () {
        angular.bootstrap(document, ['app']);
    });

    return app;
});

由于我看不到您的所有代码，我创建了一个简单的Plunk来说明应该做什么：

---

试试看。这会让你的生活轻松很多

你能发布你的main.js吗？另外，看看我创建的帮助我集成AngularJS和RequireJS的应用程序。你是否使用ng应用程序自动引导你的应用程序？Angular将尝试在加载所有必需脚本之前启动。