AngularJS inject $http into config for angular-translate

Question

I'm using angular-translate module and am trying to inject all my translations that are on server with $http. I use a provider and I know that only i can inject dependencies through $get but I can't call that function from my provider. I need to know if i can do this and how i do it.

This is my provider.

.provider('languageServices', function (){

    this.languages = {};

    this.getExistLanguages = function() {
      return ['en','es'];
    };

    this.getAllLanguages = function(){
      return this.languages;
    };

    this.$get = function($http){
      return {
        getSpecificLanguage : function(lan) {
          return  this.languages = $http.post('fr3/i18n',lan);
        }
      }
    };
  });

this is my config app

    .config(function ($stateProvider, $urlRouterProvider, USER_ROLES, $translateProvider, languageServicesProvider) {
            $stateProvider.state('dashboard', {
                    url: '/dashboard',
                    views: {
                        'header': {template: ''},
                        'content': { templateUrl: 'views/dashboard.html' }
                    },
                    data: { authorizedRoles: [USER_ROLES.admin] }
                });

            $translateProvider.preferredLanguage('es');
    // here is where i want inject all my translations with something like:
   // var languages = languageServicesProvider.getAllLanguages();
//and languages pass it to translateProvider
        });

I know this code has some errors but I only want you have a idea that I want to do.

Thanks

Answer 1

So angular-translate provides it's own $http process to do this. I happened to literally just implement this today, so you're in luck. You can see it here in their docs.

http://angular-translate.github.io/docs/#/api/pascalprecht.translate.$translateUrlLoader

Their docs are pretty bad, but the way you would implement this is in your app.config where you have your preferred language thing you would add...

$translateProvider.useUrlLoader(options)

Again this is where their documentation is bad. The options you need for this will just be your url, so...

$translateProvider.userUrlLoader({
  url: '/yoururl'
});

This will create an http call that will try to get from '/yoururl?lang=en_US' or whatever language code is currently active.

You are also going to need to include the script for url loader which is this here

https://github.com/angular-translate/angular-translate/blob/master/src/service/loader-url.js

That also gives you some more info in the comments about using it.

Let me know if you have anymore questions. Hope this helps. Took me a while to figure out what is going on with this thing. Again, very bad documentation.

Edit:

I noticed you are also writing your own services to make a list of available languages. Angular-translate also has something for this...

$translateProvider.registerAvailableLanguageKeys(['en', 'ja']);