将外部角度模块加载到“主应用程序”时出现问题。使用RequireJS的模块

时间:2016-06-02 13:07:06

标签: javascript angularjs requirejs angular-amd

我最近开始在AngularJS中使用RequireJS。我遇到了一个名为AngularAMD的插件,它使Require和Angular更容易协同工作。我有以下配置。

require.config({
    baseUrl: "",    
    paths: {
        'angular': 'lib/js/angular.min',
        'angular-route': 'lib/js/angular-route.min',
        'angular-resource': 'lib/js/angular-resource.min',
        'angularAMD': 'lib/js/angularAMD.min',
        'jquery':'lib/js/jquery-1.11.3.min',
        'bootstrap':'lib/js/bootstrap.min',
        'httpAPIService' : 'httpAPIService',
        'angular-charts':'lib/js/angular-charts',
        'd3': 'lib/js/d3.min'
    },
    shim: { 'bootstrap':['jquery'], 'angular': ['jquery', 'bootstrap'], 'angularAMD': ['angular'], 'angular-route': ['angular'], 'angular-resource': ['angular'], 'angular-charts':['angular', 'd3'], 'httpAPIService': ['mainApp']},
    deps: ['mainApp']
});

现在在mainApp.js我有以下代码:

define(['angularAMD', 'angular-route'], function (angularAMD) {

    var mainApp = angular.module('mainApp', ['ngRoute']);

    mainApp.config(function ($routeProvider) {
        $routeProvider.when("/userAgreement", angularAMD.route({
            templateUrl: 'modules/agreement/views/eulaView.html', controller: 'eulaController',
            controllerUrl: 'modules/agreement/js/eulaController'
        }))
        .otherwise({
            redirectTo: '/' 
        });
    });
    return angularAMD.bootstrap(mainApp);
});

哪个工作正常。但是,如果我尝试添加angular-charts模块。像这样:

define(['angularAMD', 'angular-route', 'angular-charts'], function (angularAMD) {

    var mainApp = angular.module('mainApp', ['ngRoute', 'angularCharts']);

    mainApp.config(function ($routeProvider) {
        $routeProvider.when("/userAgreement", angularAMD.route({
            templateUrl: 'modules/agreement/views/eulaView.html', controller: 'eulaController',
            controllerUrl: 'modules/agreement/js/eulaController'
        }))
        .otherwise({
            redirectTo: '/' 
        });
    });
    return angularAMD.bootstrap(mainApp);
});

它'给了我$injector:modulerr Module Error。我是AMD概念的新手。请帮忙。

1 个答案:

答案 0 :(得分:0)

您是否按documentation尝试了ngload

define(['angularAMD', 'angular-route', 'ngload!angular-charts'], function (angularAMD) {

...

})