我正在构建一个地址簿来学习 angular 并让它很好地工作，直到我尝试使用路由管理器。问题在于通过 require 加载 Angular 路由管理器。我收到以下错误“未捕获的对象”。

有关于此的问题，但它们已被用户删除，其他答案指出没有在 ng.module 依赖列表中包含 ngRoute 依赖，或者根本没有使用 require。我找不到答案!

我有一个包含需要配置文件的 HTML 文件:

requirejs.config({
  paths: {
    'jquery': ['//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min'],
    'angular': ['//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min','angular_1.2.16.min'],
    'angular-route': ['//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-route.min','angular-route_1.2.16.min'],
  },
  shim: {
    'jquery': {
      exports: 'jquery'
    },
    'angular': {
      exports: 'angular'
    },
    'angular-route': {
      exports: 'ngRoute',
      deps: ['angular']
    } 
  },
  baseUrl: 'js/lib'
})

require(['modules/ContactsMod'], function() { });

这是在配置文件末尾调用的 ContactsMod.js 文件:

define(['jquery', 'angular-route','angular','controllers/ContactsCtrl','routes/ContactsRout'],function($,ngRoute,ng,controller,router) {

//  var contactsApp = ng.module('contactsApp', [ngRoute]);

//  contactsApp.config(function ( $routeProvider, $locationProvider ){
//    $log.debug( "Configuring $routeProvider...");
//
//    $locationProvider.html5Mode(true);  //?????
//
//    $routeProvider
//      .when( '/', {
//        templateUrl : "views/Contacts.html",
//        controller  : "controller"
//      })
//      .otherwise({ redirectTo: '/' })
//  })

    var contactsApp = ng.module('contactsApp', []);
    contactsApp.controller(controller);
    ng.bootstrap(document, ['contactsApp']);


});

注释掉的部分是我想弄清楚的部分。上面的版本有效，但是当我尝试将 ngRoute 依赖项添加到注释掉的部分中的 ng.module 调用时，我得到了提到的错误。

我可以看到在调用模块之前已经加载了所有 Assets 。但我也可以看到 ngRoute 作为未定义注销，所以它不起作用是有道理的!我尝试了许多不同的配置变体。就像将 angular-route 包含为 angular 的依赖项(它给出相同的错误加上另一个“Uncaught TypeError: Cannot read property 'module' of undefined'”)。

我可以看到有一个种子应用程序使用自定义异步加载器而不是 require...你有什么推荐的？

我不知道如何调试这个问题，感谢任何帮助或指点!

最佳答案

所以我采纳了 ivarni 的建议并检查了我的示例与 github.com/tnajdek/angular-requirejs-seed 存储库之间的差异。

实际上它并没有那么遥远，主要问题是与 Bootstrap 调用有关。当您使用 require 时， Bootstrap 会在 Assets 加载之前有效地触发。混淆是因为如果您查看网络选项卡， Assets 似乎已按要求加载。然而，Angular 已经在没有额外 Assets 的情况下执行了 Bootstrap 。请参阅:https://code.angularjs.org/1.2.1/docs/guide/bootstrap#overview_deferred-bootstrap有关将 Angular 与 require 结合使用时 Bootstrap 需要做什么的更多信息。

我的需求配置文件现在看起来像:

require.config({
    baseUrl: 'js',
    paths: {
        jquery: ['//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min', 'lib/jquery/jquery_2.0.0.min.js'],
        angular: ['//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min', 'lib/angular/angular_1.2.16.min'],
        angularRoute: ['//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-route.min', 'lib/angular-route/angular-route_1.2.16.min']
    },
    shim: {
        'angular' : {'exports' : 'angular'},
        'angularRoute': ['angular'],
    }
});

window.name = "NG_DEFER_BOOTSTRAP!";

require( ['angular', 'modules/contactsMod', 'routes/contactsRoutes'], function(angular, contactsMod, routes) {
    'use strict';

    var $html = angular.element(document.getElementsByTagName('html')[0]);

    angular.element().ready(function() {
        angular.resumeBootstrap([contactsMod.name]);
    });
});

为了完成这项工作，我还必须返回包含的模块，以便我可以在上面的代码片段中将其作为具有依赖项的模块来调用。所以我的 ContactsMod.js 现在看起来像这样:

define(['angular', 'controllers/contactsCtrl', 'angularRoute'], function (angular, controllers) {
    'use strict';

    // Declare app level module which depends on filters, and services
    return angular.module('contactsMod', [ 'ngRoute', controllers.name]);
});

我希望这对某人有用...感谢您的帮助!

关于javascript - AngularJS、requireJS 和 ngRoute，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24203890/