如何在单独的文件中获取角度翻译

Question

我目前正在尝试将角度翻译应用于我的项目。这样做的问题是我不希望我的应用程序.js充满翻译，我宁愿将其放在翻译文件夹中的单独文件中。

我的项目结构如下所示：

wwwroot
-- css
-- images
-- js
 --- controllers
 --- directives
 --- filters
 --- services
 --- app.js
-- resources
 --- locale-nl.json
 --- translate.js
-- views

我的应用程序.js看起来与此类似：

angular.module('testApp', ['ngRoute', 'ngResource', 'ui.bootstrap', 'ngAnimate', 'angular-loading-bar', 'smart-table', 'pascalprecht.translate']);

我的翻译.js文件如下所示：

angular.module("testApp").config([
    "$translateProvider", function ($translateProvider) {
        $translateProvider.useLocalStorage();
        $translateProvider.useStaticFilesLoader({
            prefix: "resources/locale-",
            suffix: ".json"
        });
        $translateProvider.preferredLanguage("nl");
    }
]);

locale-nl.json 如下所示：

{
  "FOO": "This is a paragraph",
  "TITLE": "Helloooo"
}

在我的主方面.html我有一个正常的翻译值：

{{ 'TITLE' | translate }}

在我的主控制器中，我有这个：

"use strict";
angular.module("testApp")
    .controller("MainController", function ($scope, $translate, userRole) {
        var vm = this;
        vm.role = userRole;
        console.log(vm.role);
    });

但是似乎没有翻译任何东西，也没有在不同的文件中查找。

Answer 1

根据为每个

静态文件声明的语言键，将registerAvailableLanguageKeys添加到代码中：

angular.module("testApp").config([
    "$translateProvider", function ($translateProvider) {
        $translateProvider.useLocalStorage();
        $translateProvider.registerAvailableLanguageKeys(['en', 'de', 'nl',    
        etc..]);
        $translateProvider.useStaticFilesLoader({
            prefix: "resources/locale-",
            suffix: ".json"
        });
        $translateProvider.preferredLanguage("nl");
    }
]);

Answer 2

在我的gulp文件中，我包含了js文件夹中的所有.js文件。翻译.js位于我的js文件夹之外。
我将翻译.js移到我的js文件夹中，现在它正在工作。