RequireJS + AngularJS + Module：依赖性问题

时间：2014-05-01 01:24:51

标签： angularjs requirejs angular-ui-router angular-google-maps

我在本地设置了angularjs应用程序，一切正常，直到我将代码上传到登台服务器。我现在遇到了不受尊重的依赖问题，但我不明白为什么。我想这是在本地工作，因为它加载了更快的库。我现在修改了我的应用以尝试解决此问题但无法设法使其正常工作。

我的应用程序正在加载单个页面应用，由3个视图组成（main，map和map-data）。我使用AngularJS模块结构来启动这个应用程序。这是我的目录结构：

enter image description here

index.html非常基本：

<!DOCTYPE HTML>
<html lang="en-US">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, minimum-scale=1.0" />
        <title>Map Application</title>
        <link rel="icon" sizes="16x16" href="/favicon.ico" />

        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key={{ map_key }}&sensor=false"></script>
        <script type="text/javascript" src="/js/bower_components/requirejs/require.js"></script>

        <link rel="stylesheet" href="/css/main.css" media="screen" type="text/css">
        <link rel="stylesheet" href="/js/bower_components/bootstrap/dist/css/bootstrap.css">
    </head>
    <body>
        <!-- Content -->
        <div id="content" data-ui-view></div>

        <script>
            // obtain requirejs config
            require(['require', 'js/require-config'], function (require, config) {

                // set cache beater
                config.urlArgs = 'bust=v{{ version }}';

                // update global require config
                window.require.config(config);

                // load app
                require(['main']);
            });
        </script>
    </body>
</html>

然后requirejs-config.js：

if (typeof define !== 'function') {
    // to be able to require file from node
    var define = require('amdefine')(module);
}

define({
    baseUrl: 'js', // Relative to index
    paths: {
        'jquery': 'bower_components/jquery/dist/jquery.min',
        'underscore': 'bower_components/underscore/underscore-min',
        'domReady': 'bower_components/requirejs-domready/domReady',
        'propertyParser': 'bower_components/requirejs-plugins/src/propertyParser',
        'async': 'bower_components/requirejs-plugins/src/async',
        'goog': 'bower_components/requirejs-plugins/src/goog',
        'angular': 'bower_components/angular/angular',
        'ngResource': 'bower_components/angular-resource/angular-resource',
        'ui.router': 'bower_components/angular-ui-router/release/angular-ui-router',
        'angular-google-maps': 'bower_components/angular-google-maps/dist/angular-google-maps',
        'moment': 'bower_components/momentjs/moment',
        'moment-timezone': 'bower_components/moment-timezone/moment-timezone',
        'moment-duration-format': 'bower_components/moment-duration-format/lib/moment-duration-format'
    },
    shim: {
        'angular': {
            exports: 'angular'
        },
        'ngResource': ['angular'],
        'ui.router' : ['angular']
    }
});

然后是main.js：

/**
 * bootstraps angular onto the window.document node
 * NOTE: the ng-app attribute should not be on the index.html when using ng.bootstrap
 */
define([
    'require',
    'angular',
    './app'
], function (require, angular) {
    'use strict';

    /**
     * place operations that need to initialize prior to app start here
     * using the `run` function on the top-level module
     */
    require(['domReady!'], function (document) {
        angular.bootstrap(document, ['app']);
    });
});

然后是app.js：

/**
 * loads sub modules and wraps them up into the main module
 * this should be used for top-level module definitions only
 */
define([
    'angular',
    'ui.router',
    './config',
    './modules/map/index'
], function (ng) {
    'use strict';

    return ng.module('app', [
        'app.constants',
        'app.map',
        'ui.router'
    ]).config(['$urlRouterProvider', function ($urlRouterProvider) {
        $urlRouterProvider.otherwise('/');
    }]);
});

您可以在此处看到app.js取决于./modules/map/index，其中我加载了所有可用的控制器：

/**
 * Loader, contains list of Controllers module components
 */
define([
    './controllers/mainCtrl',
    './controllers/mapCtrl',
    './controllers/mapDataCtrl'
], function(){});

每个控制器都在请求相同类型的模块，这里是mapDataCtrl.js由/触发的模块：

/**
 * Map Data controller definition
 *
 * @scope Controllers
 */
define(['./../module', 'moment'], function (controllers, moment) {
    'use strict';

    controllers.controller('MapDataController', ['$scope', 'MapService', function ($scope, MapService)
    {
        var now = moment();

        $scope.data = {};
        $scope.data.last_update = now.valueOf();
        $scope.data.time_range = '<time range>';
        $scope.data.times = [];

        var point = $scope.$parent.map.center;

        MapService.getStatsFromPosition(point.latitude, point.longitude).then(function(data){
            $scope.data.times = data;
        });
    }]);
});

如您所见，控制器正在请求定义状态和模块名称的module.js：

/**
 * Attach controllers to this module
 * if you get 'unknown {x}Provider' errors from angular, be sure they are
 * properly referenced in one of the module dependencies in the array.
 * below, you can see we bring in our services and constants modules
 * which avails each controller of, for example, the `config` constants object.
 **/
define([
    'angular',
    'ui.router',
    '../../config',
    'underscore',
    'angular-google-maps',
    './services/MapService'
], function (ng) {
    'use strict';

    return ng.module('app.map', [
        'app.constants',
        'ui.router',
        'angular-google-maps'
    ]).config(['$stateProvider', '$locationProvider', function ($stateProvider, $locationProvider) {
        $stateProvider
            .state('main', {
                templateUrl: '/js/modules/map/views/main.html',
                controller: 'MainController'
            })
            .state('main.map', {
                templateUrl: '/js/modules/map/views/main.map.html',
                controller: 'MapController',
                resolve: {
                    presets: ['MapService', function(MapService){
                        return MapService.getPresets();
                    }],
                    courses: ['MapService', function(MapService){
                        return MapService.getCourses()
                    }]
                }
            })
            .state('main.map.data', {
                url: '/',
                templateUrl: '/js/modules/map/views/main.map.data.html',
                controller: 'MapDataController'
            })
            ;
        //$locationProvider.html5Mode(true);
    }]);
});

我在这个文件中遇到了问题。我正在尝试加载模块angular-google-maps，因为我需要在我的MapCtr控制器中，而且很可能在MapDataCtrl中。但我收到以下消息：

Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module app.map due to:
Error: [$injector:modulerr] Failed to instantiate module angular-google-maps due to:
Error: [$inj...<omitted>...1)

我不知道我错过了什么，对我而言，一切看起来都很正确。我错过了什么？

更新1

我认为这是因为angular-google-map不符合AMD标准，所以我修改了requirejs-config.js，如下所示：

if (typeof define !== 'function') {
    // to be able to require file from node
    var define = require('amdefine')(module);
}

define({
    baseUrl: 'js', // Relative to index
    paths: {
        ...
        'underscore': 'bower_components/underscore/underscore-min',
        'angular-google-maps': 'bower_components/angular-google-maps/dist/angular-google-maps',
        ...
    },
    shim: {
        'angular': {
            exports: 'angular'
        },
        'ngResource': ['angular'],
        'ui.router' : ['angular'],

        'angular-google-maps': {
            deps: ["underscore"],
            exports: 'angular-google-maps'
        }
    }
});

但我仍有同样的问题。

1 个答案:

答案 0 :(得分：1)

我们可以使用带有require.js的js库。无需删除require.js。我仍然需要检查为什么require.js配置不起作用。 同时你可以尝试这种方式。 

// requirejs-config.js
define({
    baseUrl: 'js', // Relative to index
    paths: {
        'jquery': 'bower_components/jquery/dist/jquery.min',
        'underscore': 'bower_components/underscore/underscore-min',
        'domReady': 'bower_components/requirejs-domready/domReady',
        'propertyParser': 'bower_components/requirejs-plugins/src/propertyParser',
        'async': 'bower_components/requirejs-plugins/src/async',
        'goog': 'bower_components/requirejs-plugins/src/goog',
        'angular': 'bower_components/angular/angular',
        'ngResource': 'bower_components/angular-resource/angular-resource',
        'ui.router': 'bower_components/angular-ui-router/release/angular-ui-router',
        'angular-google-maps': 'bower_components/angular-google-maps/dist/angular-google-maps',
        'moment': 'bower_components/momentjs/moment',
        'moment-timezone': 'bower_components/moment-timezone/moment-timezone'
    },
    shim: {
        'angular': {
            exports: 'angular'
        },
        'ngResource': ['angular'],
        'ui.router' : ['angular']
    }
});
// google-map.js
define(['underscore', 'angular-google-maps'], function(){
});
And then requiring the module each time I need the map:

require(['google-map'], function(){
});

https://github.com/angular-ui/angular-google-maps/issues/390

相关问题
最新问题