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.