Angularjs 多语言，具有多个应用程序和1个翻译服务

我目前正在使用angularjs制作一个html页面

我有一个html页面，有一个侧边栏，一个导航栏和一个内容区。 像这样：

我遵循以下指示：

成功地，我的应用程序运行正常。 但我不知道如何将多语言功能应用到我的每个应用程序中。 例如：导航栏是一个应用程序，边栏是一个应用程序，主要内容是一个应用程序

我怎样才能在不反复下载json的情况下将1 translationService应用于他们

---

有人能帮我吗？谢谢。

我仍然认为最好为整个页面使用一个应用程序，但为导航、侧边栏和主要内容使用单独的控制器。这样，它们都可以单独工作，但你不会因为处理不同的应用程序而感到尴尬。我能想到的拥有独立应用程序的唯一原因是，如果你想确保不同部分之间永远不会共享服务。然而，在你的情况下，看起来你想分享翻译服务，所以我认为使用一个应用程序是有意义的

如果你真的想拥有多个应用程序，这仍然是可能的。您可以异步加载翻译，完成后，为每个应用程序调用

angular.module（）

，并将翻译作为常量注入。然后，在配置翻译提供程序时，可以像插入任何服务一样插入翻译常量

我以前在一个应用程序中这样做过，但是我现在没有访问代码的权限。我是为一个应用程序做的，但是您可以轻松地将其扩展到多个应用程序。我相信它看起来与此相似：

var $http = angular.injector().get('$http');
var $q = angular.injector().get('$q');
var promises = [
    $http.get('path/to/translations/en.json'),
    $http.get('path/to/translations/fr.json'),
];
$q.all(promises)
   .then(function(translations) {
        angular.module('app', [])
            .constant('translations_en', translations[0])
            .constant('translations_fr', translations[1])
            .config(['$translateProvider', 'translations_en', 'translations_fr', 
                function($translateProvider, translations_en, translations_fr) {
                    $translateProvider.translations('en', translations_en);
                    $translateProvider.translations('fr', translations_fr);
                }]);
        angular.bootstrap(element, ['app']);
    });

对于多个应用程序，您需要为每个应用程序运行一次

angular.module

块

或者，您可以为每个零件定义单独的模块，然后定义依赖于其他小模块的父模块，即

angular.module('navigation', []);
angular.module('sidebar', []);
angular.module('mainPage', []);
angular.module('app', ['navigation', 'sidebar', 'mainPage']);
angular.bootstrap(element, ['app']);

---

我相信在这种情况下，所有模块都将共享相同的翻译服务。

您是否使用iFrame？如果是这样，我认为这是不可能的。或者，至少在帧之间共享信息是非常困难的。请查看我发布的管理员。这里没有iframe，只有divs和divi我看了链接，看到了很多iframe。哦，我明白了-有iframe，但是你所有的角度代码都在内部iframe中。那么，你为什么要使用多个应用程序呢？我认为它会更有意义，有一个应用程序的一切，并有单独的控制器侧栏，导航栏和内容。