CODEWITHSUNDEEP
angularjsangular-translate
Markus Johansson
Markus Johansson

Reputation: 3773

Dependency on $translateProvider in factory?

Trying to get my so far very basic angularjs app to work with translations support. First I create the app, then configure the $translateProvider. Then I create a factory for Data in which I set initial stuff in $rootScope and also want to set the language.

var app = angular.module('app', ['ngRoute', 'pascalprecht.translate']);

app.config(['$translateProvider', function($translateProvider) {
    $translateProvider.preferredLanguage('sv');
    $translateProvider.useStaticFilesLoader({
          prefix: '/assets/translations/',
          suffix: '.json'
      });
}]);

app.factory('Data', ['$http', '$rootScope', '$translateProvider',
    function ($http, $rootScope, $translateProvider) {
        $http.get('/api/get/state').success(function(data) {
            $translateProvider.preferredLanguage(data.language);
            // ... set other stuff here in $rootScope
        });

   }
]);

The problem is that when I run this code I get:

Error: [$injector:unpr] http://errors.angularjs.org/1.2.16/$injector/unpr?p0=%24translateProviderProvider%20%3C-%20%24translateProvider%20%3C-%20Data
    at Error (native)
    at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.min.js:6:450
    at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.min.js:35:431
    at Object.c [as get] (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.min.js:34:13)
    at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.min.js:35:499
    at c (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.min.js:34:13)
    at Object.d [as invoke] (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.min.js:34:230)
    at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.min.js:36:13

Is it not possible to have a dependency like this? In that case, how can I set the language when I get it? I might be doing things completely wrong since I'm very new to angularjs, so any suggestions how to do things in completely different ways are also welcome.

Upvotes: 1

Views: 5054

Answers (2)

msapkal
msapkal

Reputation: 8346

Use $translate service instead of provider for factory.

app.factory('Data', ['$http', '$rootScope', '$translate',
    function ($http, $rootScope, $translate) {
        $http.get('/api/get/state').success(function(data) {
            $translate.use(data.language);
            // ... set other stuff here in $rootScope
        });

   }
]);

And use $translate.use(data.language);, instead of $translateProvider.preferredLanguage(data.language); to set/change language at runtime.

Upvotes: 3

alx249
alx249

Reputation: 21

You need to write '$translate', not '$translateProvider'

app.factory('Data', ['$http', '$rootScope', '$translate',
    function ($http, $rootScope, $translate) {
        //...
   }
]);

Upvotes: 2

Related Questions