如何在單獨的文件中進行角度平移

Question

我目前正在嘗試對我的項目應用angular-translate。 問題是我不希望我的app.js充滿翻譯，而是希望將其放在翻譯文件夾中的單獨文件中。

我的項目結構如下所示：

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

我的app.js看起來與此類似：

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

我的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"
}

在我的main.html中，我有一個正常的轉換值：

{{ 'TITLE' | translate }}

在我的mainController中，我有這個：

"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文件。 translate.js位於我的js文件夾之外。
我將translation.js移到了js文件夾中，現在可以使用了。