如何在单独的文件中获取 angular-translate

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");
    }
]);

语言环境-nl.json 如下所示：

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

在我的main.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 文件。 translate.js 位于我的 js 文件夹之外。
我将 translation.js 移动到我的 js 文件夹中，现在它可以正常工作了。

如何在单独的文件中获取 angular-translate

How to get angular-translate in separate files

angularjs

angular-translate