Angular Translate - Unknown provider: $translateProviderProvider

RicardoGonzales picture RicardoGonzales · Sep 17, 2015 · Viewed 7.9k times · Source

I was implementing angular translate in my project and everything works fine, but when I've moved my $translateProviderfrom my config block to my controller.js, I'm getting this error:

Unknown provider: $translateProviderProvider <- $translateProvider <- myController

But every module seems to be correctly referenced, am I missing something here? or maybe this translations can't work inside of a controller?

controller.js

angular.module('myapp.controller', ['pascalprecht.translate'])

    .controller('myController', 
        ['$translateProvider', 
        function ($translateProvider) {

            function init() {
                $translateProvider.useUrlLoader('myweb.com/api/lang', {
                    queryParameter : 'en_US'
                });
                $translateProvider.preferredLanguage('en_US');
            }

            init(); 
    }]);

UPDATE

Now I know that $translateProvider are not available to use it in controller class.

What I'm trying to accomplish:

I don't want to load all the traductions files from the rest, because there are many components that the user never see, so if I go to the page that contains ng-controller="myController", the init() function should call to the rest and get the traductions only for the current component. I've found this on the documentation:

angular.module('contact')
.controller('ContactCtrl', function ($scope, $translatePartialLoader) {
  $translatePartialLoader.addPart('contact');
});

But how can I:

  1. Specify the URL for my REST?
  2. Specify the parameter 'contact' in the URL to my REST know that it should retrieve me the traductions only for the contact component.

Answer

Neil S picture Neil S · Sep 17, 2015

When injecting a provider in a controller, you don't need the Provider suffix.

just inject it as

.controller('myController', ['$translate', function ($translate) { ... }])