AngularJS,requireJS和ngRoute

Question

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

对此有一些疑问,但用户已将其删除,其他答案指出未在ng.module依赖列表中包含ngRoute依赖性,或者根本没有使用require.我没有太多运气找到答案!

我有一个包含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注销为undefined,因此它不起作用!我尝试了很多不同的配置变种.就像包含angular-route作为angular的依赖性一样(它给出了相同的错误加上另一个'未捕获的TypeError:无法读取未定义的'属性'模块').

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

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

Answer 1

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

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

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

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

Answer 2

您不需要在以下位置导出“ngRoute”：

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


});