AngularJS、requireJS 和 ngRoute

Question

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

对此存在疑问，但已被用户删除，其他答案表明未将 ngRoute 依赖项包含在 ng.module 依赖项列表中，或者根本没有使用 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 调用时，我得到了提到的错误。

我可以看到在调用模块之前已经加载了所有资产。但我也可以看到 ngRoute 以未定义的形式注销，因此它不起作用是有道理的！我尝试了许多不同的配置变体。就像包含 angular-route 作为 angular 的依赖项（它给出了相同的错误加上另一个“未捕获的类型错误：无法读取未定义的属性“模块”）。

我可以看到有一个种子应用程序使用自定义异步加载程序而不是要求...您有什么建议？

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

Answer 1

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

实际上并没有那么遥远，主要问题与引导调用有关。当您使用 require 时，引导程序会在资产加载之前有效地触发。混乱的出现是因为如果您查看网络选项卡，似乎资产已由 require 加载。然而，Angular 已经在没有额外资产的情况下执行了引导程序。请参阅：https://code.angularjs.org/1.2.1/docs/guide/bootstrap#overview_deferred-bootstrap，了解更多关于在 require 中使用 Angular 时引导程序需要做什么的信息。

我的 require 配置文件现在看起来像：

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]);
    });
});

为了完成这项工作，我还必须返回包含的模块，以便我可以在上面的 sn-p 中将其称为具有依赖关系的模块。所以我的 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]);
});

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

Answer 2

你不需要 export 'ngRoute' in:

'angular-route': {
      deps: ['angular']
    } 

而你在注入 ngRoute 时错过了 ''，试试这个：

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

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: '/' })

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


});