How to get angular-translate in separate files

Question

I'm currently trying to apply angular-translate to my project. The problem with this is that I don't want my app.js to be filled with translations, I'd rather have it in separate files in a translation folder.

My project structure looks something like this:

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

My app.js looks simular to this:

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

My translate.js file looks like this:

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

The locale-nl.json looks like this:

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

In my main.html I have a normal translation value:

{{ 'TITLE' | translate }}

and in my mainController I have this:

"use strict";

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

But nothing seems to get translated and it doesn't look in different files.

Answer 1

In my gulp file I included all my .js files from my js folder. The translate.js was located outside my js folder.
I moved the translation.js inside my js folder and now it's working.