Question

在服务器端，我有一个字典形式的json文件：

{
    "term1": "definition1",
    "term2": "definition2",
    "term3": "definition3"
}

我正在尝试创建一个服务或提供程序（其中一个就足够了），它将拥有来自此json文件的数据缓存，并且可以使用它。

结构如下：

myApp.service('translateSrv', function() {
    this.dictionaryData; // how to populate

    this.translate = function(input) {
        return this.dictionaryData[input];
    };
});

myApp.provider('translateProvider', function() {
    this.dictionaryData; // how to populate

    this.$get = function() {
        return {
            translate: function() {
                return this.dictionaryData[input];
            }
        }
    };
});

我的问题是如何在第一次调用translate（）方法之前（在模块创建/配置时）填充此服务或提供程序中的字典数据？第一次方法调用时，我无法异步执行。

我想在过滤器中使用其中一种结构：

myApp.filter('translate', ['translateProvider', function(translateProvider) {
    return function(input) {
        return translateProvider.translate(input);
    }
}]);

我最近开始使用Angular工作，所以也许我的方法是错误的。我会感激每一个提示。

Answer 1

提供商名称：

请勿使用“提供者”为您的提供者名称添加后缀，因为您在配置函数中用于注入提供者的名称将以“提供者”为后缀

myApp.provider('translate', /*...*/); 
// -> injectable provider is 'translateProvider'
// -> injectable instance is 'translate'

在配置函数中填充提供程序：

myApp.config(['translateProvider', function(translateProvider) {
    translateProvider.dictionaryData = { /*...*/ };
});

对性能的建议！



如果您的翻译是静态的每页浏览量，请考虑预翻译您的模板。

如果您确实需要它，请更喜欢在文档中的内联脚本中编写整个翻译js对象

1 XHR less

没有延迟加载推迟应用程序加载

延迟加载

如果你真的不得不懒惰加载那些翻译：

在应用程序加载之前，使用外部XHR延迟应用程序加载，同时将translationData保持在提供程序配置级别，
或者利用角度生根或ui-router的“解析”部分，同时在实例上设置translationData对象（不在提供者上）

如何在两者之间进行选择？



第一个选项非常简单，您不必将应用程序路由与延迟加载约束结合起来。

对于第二种选择，更喜欢ui-router并声明一个抽象状态，负责处理“resolve”状态属性中的延迟加载数据，并使其他状态成为此抽象状态的子项，这样您就不必在每个依赖于翻译的状态上添加解析约束。

具有缓存数据的服务或提供商

1 个答案: