使用requirejs加載angularjs地理庫

Question

我正在嘗試將這個angularjs庫AngularGeo包含到我的項目中，但是在angularjs模塊的app.js文件中收到此錯誤：

Failed to instantiate module myApp due to:
Error: [$injector:unpr] Unknown provider: angular-geo

我看到angularjs-geo文件已加載，並且在開發工具中看到了它們，但是無論如何我都遇到了這個問題。

main.js ：

require.config({
    baseUrl: 'app',
    //urlArgs: 'v=1.0'
    paths: {
        'angular': '../scripts/angular',
        'angular.route': '../scripts/angular-route',
        'angular.localStorage': '../scripts/angular-local-storage.min',
        'lodash': '../scripts/lodash',
        'angular-google-maps': '../scripts/angular-google-maps',
        'jquery': '../scripts/jquery-2.1.1',
        'uiBootstrap': '../scripts/ui-bootstrap-0.11.0.min',
        'underscore': '../scripts/underscore-min',
        'gmaps': '../scripts/gmaps',
        'async': '../scripts/requirejs-plugins/async',
        'propertyParser': '../scripts/requirejs-plugins/propertyParser',
        'goog': '../scripts/requirejs-plugins/goog',
        'select2': '../scripts/select2/select2',
        'ui-select2': '../scripts/ui-select2/src/select2',
        'angular-detour': '../scripts/angular-detour/dist/angular-detour.amd',
        'angular-geo': '../scripts/modules/angularGeo/angulargeo',
        'angular-geo-providers.google': '../scripts/modules/angularGeo/providers/angulargeo-google'
    },

    shim: {
        'angular': {
            exports: 'angular',
            deps: ['jquery']
        },
        'underscore': {
            exports: '_'
        },
        'angular.route': ['angular'],
        'angular.localStorage': ['angular'],

        'angular-google-maps': {
            deps: ['angular', 'underscore'],
            exports: 'angular-google-maps'
        },
        'uiBootstrap': ['angular'],
        'select2': ['jquery', 'angular'],
        'ui-select2': ['select2'],
        'angular-geo': {
            exports: 'angular-geo',
            deps: ['angular', 'goog']
        },
        'angular-geo-providers.google': {
            exports: 'angular',
            deps: ['angular', 'angular-geo']
        }
    }
});

app.js ：

define(['angular', 'angular.route', 'angular.localStorage', 'uiBootstrap', 'angular-google-maps', 'services/routeResolver', 'ui-select2', 'angular-detour', 'angular-geo'], function () {
    var app = angular.module('myapp', ['ngRoute', 'LocalStorageModule', 'ui.bootstrap', 'google-maps', 'routeResolverServices', 'ui.select2', 'agt.detour', 'angular-geo']);
    app.config(['$routeProvider', 'routeResolverProvider', '$controllerProvider', '$compileProvider', '$filterProvider', '$provide', '$locationProvider', 'angular-geo', function ($routeProvider, routeResolverProvider, $controllerProvider, $compileProvider, $filterProvider, $provide, $locationProvider, angularGeoProvider, angularGeoGoogleProvider) {
        angularGeoProvider.addProvider(angularGeoGoogleProvider.name);
    }
}

Answer 1

依賴項（ 不是模塊依賴項 ）的名稱應為angularGeo 。 而且由於您可能想要提供者 ， angularGeoProvider而不是angular-geo 。 另外，由於您還使用了angularGeoGoogleProvider ，因此也將其添加到依賴項列表中，即：

define(['angular', ..., 'angular-geo'], function () {
    var app = angular.module('myapp', ['ngRoute', ..., 'angular-geo']);
    app.config([
        '$routeProvider', ..., 'angularGeoProvider', 'angularGeoGoogleProvider',
        function ($routeProvider, ..., angularGeoProvider, angularGeoGoogleProvider) {
            angularGeoProvider.addProvider(angularGeoGoogleProvider.name);
        }
    ]);
};