AngularJS 服务延迟

Question

我目前在项目设计方面遇到问题。我正在使用 angularjs 框架，我的任务是为网页提供翻译，但翻译需要从 BE 端的 xml 文件中提供。所以因为我发现 angulars i18n 在 FE 端是可配置的，所以我不得不使用另一种策略。

我决定制作一个服务，在加载其他所有内容之前在解析期间获取数据：

app.factory('dictionaryService', ['$http', '$rootScope', function ($http, $rootScope) {
return {

    getDictionary: function (defaultLanguage) {

        var chosenLanguage = null;
        if (angular.isUndefined($rootScope.defaultLanguage) || $rootScope.defaultLanguage == null) {
            chosenLanguage = defaultLanguage;
            $rootScope.defaultLanguage = chosenLanguage;
        } else {
            chosenLanguage = $rootScope.defaultLanguage;
        }

        var translation = new Array();


        translation[chosenLanguage] = new Array();

        return $http.get('Translation/GetCurrentDictionary/', {
            params: {
                language: chosenLanguage
            }
        });
    },
    GetLanguagesSetup: function () {
        return $http.get('Translation/GetLanguagesSetup/');
    }

}

}]);

然后解析如下：

    $routeProvider.when("/diagnose", {
    controller: "diagnoseCtrl",
    templateUrl: "/app/views/diagnose.html",
    resolve: {
        startupData: function (dictionaryService, $q) {
            var def = $q.defer();
            var translation = new Array();

            var startupData = new Array();
            var defaultLanguage = "EN";

            var dict = dictionaryService.getDictionary(defaultLanguage).then(function (JSONData) {
                var keys = Object.keys(JSONData.data.data);
                var chosenLanguage = JSONData.data.lang;
                translation[chosenLanguage] = {};

                for (i = 0; i < keys.length; i++) {
                    translation[keys[i]] = JSONData.data.data[keys[i]];
                }

                startupData['translations'] = translation;

                def.resolve(startupData);

            }).catch(function (e) {
                console.log("Translation fetching exception, " + e);
                return $q.reject(e);
            });




            return def.promise;
        }
    }
});

如您所见，我将获取的翻译存储在 startupData 中。然后在使用它的控制器中，我将此数据分配给 $rootScope。它似乎已经不是最好的解决方案，但我想不出一个不同的解决方案然后我创建了一个获取直接翻译文本的翻译服务：

app.factory('translationService', ['$rootScope', '$http', function ($rootScope, $http) {


var translations = null;

return {
    getText: function (key) {
        if ($rootScope.cachedTranslations == undefined) {
            return key;
        }
        var result = $rootScope.cachedTranslations[key];

        if (result == null) {

            return key;
        } else {
            return result;
        }

    }

}

}]);

这个解决方案的最大问题是，我没有使用承诺，但我不想为每个翻译都进行 http 查询。另一个问题是设计者提供的 html 模板：

<body ng-controller="mainController">
<loading-screen ng-show="!isDataLoaded"></loading-screen>

<div id="header" class="headerView" ng-controller="headerController" ng-show="isDataLoaded">
        some header stuff
        ...

        <button ng-bind="option1" ng-click="redirectTo('#subpage1')"></button>
        <button ng-bind="option2" ng-click="redirectTo('#subpage2')"></button>
        <button ng-bind="option3" ng-click="redirectTo('#subpage3')"></button>
        <button ng-bind="language" ng-if="availableLanguages.length > 1" ng-repeat="language in availableLanguages" ng-click="setLanguage(language)"></button>
    </div>
</div>
<
<div id="content" ng-view ng-show="isDataLoaded">
</div>
<footer id="footer" class="footer" ng-show="isDataLoaded">
    <status-bar></status-bar>
</footer>

Resolve 仅适用于 ng-views 的控制器，但 header 内容也需要翻译，所以我需要让 headerCtrl 在它尝试之前以某种方式等待应用翻译。因此，我做出了另一个不受欢迎的决定，即通过广播消息通知所有控制器启动完成，并在显示加载屏幕时等待一切完成。它看起来不错并且反应灵敏（此时每次启动 1 秒是可以接受的）。

问题是，我在这次尝试中看到了很多设计错误，我就是想不出更好的设计。

所以我的主要问题是： 我怎样才能让它变得更好？第一个服务 returns 第二个服务使用的整个数组所以我不知道如何将它与承诺结合起来？ 恐怕随着应用的发展我会发现自己陷入了全局变量和全局事件的地狱

在此先感谢您的帮助！

Answer 1

您似乎在寻找 angular-translate-loader-static-files 扩展 angular-translate. See the documentation here.

这与 $translateProvider 的正确配置一起将允许您从后端获取带有翻译的 json 文件，甚至可以按需交换翻译 - 例如用户更改语言设置，控制器重新配置 $translateProvider。您的工作已完成 - 所有内容都将自动获取和更新，无需重新加载页面。

AngularJS 服务延迟

AngularJS Service to Service with a delay

html

jquery-ui

angularjs

angularjs-routing