Question

我对我的应用中的模块加载生命周期缺乏了解。

结构简要概述：

app [module]
常见[模块]
- commonConfig [provider]
- 普通[工厂]
SP.Helpers [模块]
- SPExternalRest [provider]
- ... [供应商]

每个模块都在一个单独的文件中，以相同的顺序调用。

App模块取决于通用模块。通用模块无所依赖。助手模块取决于常见。

我启动模块的代码：

angular.module('app', ['ngRoute', 'ngCookies', 'ngSanitize', 
                       'ngResource', 'ngAnimate', 'common', 'SP.Helpers']);
angular.module('common', []);
angular.module('SP.Helpers', ['common']);

Common.js

var commonModule = angular.module('common');
commonModule.provider('commonConfig', commonConfig);
commonModule.factory('common', [
  '$q',
  '$rootScope',
  '$timeout',
  'commonConfig',
  'logger',
  common]);

  function commonConfig() { ... }
  function common($q, $rootScope, $timeout, commonConfig, logger) { ... }

SPExternalRest.js

var module = angular.module("SP.Helpers");
module.provider(serviceId, ['common', 'commonConfig', SPExternalRest]);

function SPExternalRest(common, commonConfig) { ... }

我的问题，就是这个配置，当它加载SP.Helpers时，我有这个错误

错误：[$ injector：modulerr]由于以下原因无法实例化模块SP.Helpers：

错误：[$ injector：unpr]未知提供者：普通

当我逐步调试时，我可以看到它按此顺序调用方法：

commonConfig
...
SPExternalRest
...
共同

所以，我理解为什么我有这个错误，但我不明白为什么在加载'SPExternalRest'之前没有完成加载'common'模块...特别是在指定了之间的依赖关系之后。

如果您对此有任何想法，我会接受。

Lauz

修改我的app.html文件。

<!-- Vendor libraries -->
<script src="Scripts/jquery-1.9.1.js"></script>

<script src="/_layouts/15/MicrosoftAjax.js"></script>
<script src="/_layouts/15/init.debug.js"></script>
<script src="/_layouts/15/core.debug.js"></script>
<script src="/_layouts/15/SP.Runtime.debug.js"></script>
<script src="/_layouts/15/SP.debug.js"></script>
<script src="/_layouts/15/SP.UI.Controls.debug.js"></script>
<script src="/_layouts/15/SP.RequestExecutor.js"></script>
<!--<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.1/angular-filter.js"></script>-->

<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-route.js"></script>
<script src="Scripts/angular-sanitize.js"></script>
<script src="Scripts/angular-resource.js"></script>
<script src="Scripts/angular-cookies.js"></script>
<script src="Scripts/angular-animate.js"></script>
<script src="Scripts/URI.js"></script>
<script src="Scripts/linq.js"></script>

<!-- My libraries -->
<script src="App/utils/jquery.extensions.js"></script>

<!-- Modules initialization -->
<script src="App/common/initModule.js"></script>
<script src="App/utils/initModule.js"></script>
<script src="App/filters/initModule.js"></script>
<script src="App/repositories/initModule.js"></script>
<script src="App/services/initModule.js"></script>

<!-- common angular modules -->
<script src="App/common/common.js"></script>
<script src="App/common/logger.js"></script>

<!-- App bootstraping -->
<script src="App/app.js"></script>
<script src="App/config/config.js"></script>
<script src="App/config/config.route.js"></script>
<script src="App/config/config.angular.http.js"></script>
<script src="App/config/config.exceptionHandler.js"></script>

<!-- App filters -->
<script src="App/filters/currencyEuroFilter.js"></script>

<!-- App directives -->
<script src="App/directives/keyPressEnterDirective.js"></script>

<!-- App services -->
<script src="App/utils/spUtils.js"></script>
<script src="App/services/spCsomService.js"></script>
<script src="App/services/spExternalRestService.js"></script>
<!--<script src="App/services/spRestService.js"></script>-->
<script src="App/services/spContext.js"></script>

<!-- app core -->
<script src="App/layout/workingonit.js"></script>
<script src="App/layout/spAppChrome.js"></script>
<script src="App/layout/shell.js"></script>
<script src="App/layout/header.js"></script>
<script src="App/layout/quicklaunch.js"></script>

<!-- App entities -->
<script src="App/entities/productRange.js"></script>
<script src="App/entities/product.js"></script>
<script src="App/entities/manufacturer.js"></script>
<script src="App/entities/supplier.js"></script>
<script src="App/entities/searchResult.js"></script>

<!-- App reporitories -->
<script src="App/repositories/searchRepository.js"></script>
<script src="App/repositories/productRepository.js"></script>
<script src="App/repositories/productRangeRepository.js"></script>

<!-- App controllers -->
<script src="App/productranges/productRanges.js"></script>
<script src="App/productranges/productRangesDetail.js"></script>

<script src="App/products/products.js"></script>
<script src="App/products/productsDetail.js"></script>

<script src="App/search/search.js"></script>
<script src="App/search/searchDetail.js"></script>

<script src="App/help/help.js"></script>
<script src="App/settings/settings.js"></script>

SPExternalRestService.js

(function () {
    'use strict';

    var serviceId = 'SPExternalRest';
    var module = angular.module("SP.Helpers");
    module.provider(serviceId, [
        'common',
        'commonConfig',
        SPExternalRest
    ]);

    function SPExternalRest(
        common, commonConfig
        ) {
        var _finalUrl = '';
        var _baseUrl = '';

        init();

        function init() {
            common.$broadcast(config.workingOnItToggleEvent, { show: true });
            common.logger.log('service loaded', undefined, serviceId);
        };

        this.$get = ['$q', function ($q) {
            var that = this;

            // Methods accesible from instance
            return {
                setBaseUrl: function (newBaseUrl) {
                    _baseUrl = newBaseUrl;
                },
                get: function (operation, params, searches) {
                    var finalUrl = makeUrl(operation, params, searches);
                    var deferred = $q.defer();
                    var promise = deferred.promise;

                    var context = SP.ClientContext.get_current();
                    var request = new SP.WebRequestInfo();
                    request.set_url(finalUrl);
                    request.set_method('GET');
                    request.set_headers({ "Accept": "application/json;odata=verbose" });

                    var response = SP.WebProxy.invoke(context, request);
                    context.executeQueryAsync(function (data) {
                        if (response.get_statusCode() == 200) {
                            var body = response.get_body() || '{}';
                            try {
                                deferred.resolve(JSON.parse(body));
                            }
                            catch (error) {
                                deferred.reject(response);
                            }
                        }
                        else {
                            deferred.reject(response);
                        }
                    }, function (data) {
                        deferred.reject(JSON.parse(response.get_body()));
                    });

                    return promise;
                }
            };
        }];
    };

})();

AngularJS - 模块加载和依赖

0 个答案: