AngularJS, requireJS and ngRoute

AngularJS, requireJS and ngRoute

本文关键字：ngRoute and requireJS AngularJS      更新时间：2023-09-26

我正在构建一个地址簿来学习angular，并让它很好地工作，直到我尝试使用路由管理器。问题是通过require加载angular路由管理器。我得到以下错误'Uncaught object'。

有一些关于这个的问题，但是他们已经被用户删除了，其他的答案指向没有在ng中包含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. js时。在注释掉的部分中，我得到了提到的错误。

我可以看到，在模块被调用之前，所有的资源已经被加载。但我也可以看到ngRoute注销为未定义，所以它不能工作是有道理的!我尝试了许多不同的配置变体。比如把angular-route作为angular的依赖(会给出同样的错误，外加一个'Uncaught TypeError: Cannot read property 'module' of undefined')。

我可以看到有一个种子应用程序使用自定义异步加载器而不是require…你有什么建议吗?

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

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

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

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

为了使它工作，我还必须返回包含的模块，以便我可以在上面的代码片段中将它作为一个具有依赖关系的模块调用。所以我的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]);
});

我希望这对某人有用…谢谢大家的帮助!

你不需要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']);

});
相关文章：