AngularJS，requireJS和ngRoute [英] AngularJS, requireJS and ngRoute

问题描述

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

I'm building an Address Book to learn angular and have it working nicely until I try to use the route manager. The issue is with loading the angular route manager via require. I'm getting the following error 'Uncaught object'.

有关于此的问题，但用户已将其删除，其他答案指向未包括ng.module依赖列表中的ngRoute依赖性，或根本不使用require。我没有太多运气找到答案！

There have been questions about this but they have been removed by the user, and other answers point to not having included the ngRoute dependancy in the ng.module dependancy list, or aren't using require at all. I'm not having much luck finding an answer!

我有一个包含require配置文件的HTML文件：

I have the an HTML file that includes a require config file:

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文件：

and this is the ContactsMod.js file called at the end of the config file:

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调用时，我得到了提到的错误。

The commented out section is the part I'm trying to figure out. The above version works, but when I try to add the ngRoute dependancy to the ng.module call in the commented out part I get the error mentioned.

我可以看到在调用模块之前已加载所有资产。但是我也可以看到ngRoute注销为undefined，所以它不起作用！我尝试了很多不同的配置变种。就像包含角度路径作为角度的依赖性（它给出相同的误差加上另一个'未捕获的TypeError：无法读取未定义的属性'模块'）。

I can see that all the assets have been loaded before the module is called. But I can also see that the ngRoute logs out as undefined so it makes sense that it doesn't work! I've tried a number of different config variants. Like including the angular-route as a dependancy of angular (which give the same error plus another of 'Uncaught TypeError: Cannot read property 'module' of undefined').

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

I can see there's a seed app that uses custom async loader instead of require... what do you recommend?

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

I don't know how to debug this problem, any help or pointers appreciated!

推荐答案

所以我接受了ivarni的建议并检查了我的例子和github.com/tnajdek/angular-requirejs-seed repo之间的差异。

So I took ivarni's advice and checked out the differences between my example and the github.com/tnajdek/angular-requirejs-seed repo.

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

Actually it wasn't that far off and the main issue was to do with the bootstrap call. When you use require the bootstrap effectively fires before the assets have loaded. The confusion comes because if you look in the network tab it appears that the assets have been loaded by require. However, Angular had already executed the bootstrap without the additional assets. Please see: https://code.angularjs.org/1.2.1/docs/guide/bootstrap#overview_deferred-bootstrap for more info on what the bootstrap needs to do when using angular with require.

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

My require config file now looks like:

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现在看起来像这样：

To make this work I also had to return the included module so that I could call it as a module with dependencies in the snippet above. So my ContactsMod.js now looks like this:

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

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

I hope this is useful to someone... Thanks for your help folks!

这篇关于AngularJS，requireJS和ngRoute的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！