Inject service in app config

Question

I want to inject a service into app config  so that data can be retrieved before the controller is called  I tried it like this   Service   app service  dbService   function         return           getData  function  q   http                var defer    q defer                 http get  db php score getData   success function data                    defer resolve data                                           return defer promise                         Config   app config function   routeProvider  dbService         routeProvider          when                            templateUrl   partials editor html               controller   AppCtrl               resolve                    data  dbService getData                                   But I get this error      Error  Unknown provider  dbService from EditorApp   How to correct setup and inject this service

User · Accepted Answer

Alex provided the correct reason for not being able to do what you're trying to do, so +1. But you are encountering this issue because you're not quite using resolves how they're designed.

resolve takes either the string of a service or a function returning a value to be injected. Since you're doing the latter, you need to pass in an actual function:

resolve: {
  data: function (dbService) {
    return dbService.getData();
  }
}

When the framework goes to resolve data, it will inject the dbService into the function so you can freely use it. You don't need to inject into the config block at all to accomplish this.

Bon appetit!

User · Answer

Explicitly request services from other modules using angular injector     Just to elaborate on kim3er s answer  you can provide services  factories  etc without changing them to providers  as long as they are included in other modules     However  I m not sure if the  Provider  which is made internally by angular after it processes a service  or factory  will always be available  it may depend on what else loaded first   as angular lazily loads modules   Note that if you want to re-inject the values that they should be treated as constants   Here s a more explicit  and probably more reliable way to do it   a working plunker  var base   angular module  myAppBaseModule       base factory  Foo   function        console log  Foo      var Foo   function name    this name   name       Foo prototype hello   function         return  Hello from factory instance     this name        return Foo     base service  serviceFoo   function       this hello   function         return  Service says hello         return this       var app   angular module  appModule        app config function  provide      var base   angular injector   myAppBaseModule        provide constant  Foo   base get  Foo        provide constant  serviceFoo   base get  serviceFoo         app controller  appCtrl   function  scope  Foo  serviceFoo       scope appHello    new Foo  app    hello       scope serviceHello   serviceFoo hello

User · Answer

A solution very easy to do it  Note   it s only for an asynchrone call  because service isn t initialized on config execution   You can use run   method  Example     Your service is called  MyService  You want to use it for an asynchrone execution on a provider  MyProvider    Your code     function        To isolate code TO NEVER HAVE A GLOBAL VARIABLE         Store your service into an internal variable       It s an internal variable because you have wrapped this code with a  function      ---           var theServiceToInject   null         Declare your application     var myApp   angular module  MyApplication               Set configuration     myApp config   MyProvider   function  MyProvider            MyProvider callMyMethod function                  theServiceToInject methodOnService                                When application is initialized inject your service     myApp run   MyService   function  MyService            theServiceToInject   MyService

User · Answer

You can use  inject service to inject a service in you config   app config function  provide         provide decorator   exceptionHandler   function  delegate   injector           return function exception  cause               var  rootScope    injector get   rootScope                 rootScope addError  message  Exception   reason exception                 delegate exception  cause                             Source  http   odetocode com blogs scott archive 2014 04 21 better-error-handling-in-angularjs aspx

User · Answer

Well  I struggled a little with this one  but I actually did it   I don t know if the answers are outdated because of some change in angular  but you can do it this way   This is your service    factory  beerRetrievalService   function   http   q   log      return       getRandomBeer  function           var deferred    q defer          var beer               http post  beer-detail              then function response            beer beerDetail   response data                 function err             log error  Error getting random beer   err           deferred reject                       return deferred promise                    And this is the config   when   beer-detail       templateUrl     beer-detail     controller     productDetailController      resolve        beer  function beerRetrievalService          return beerRetrievalService getRandomBeer

User · Answer

Short answer  you can t  AngularJS won t allow you to inject services into the config because it can t be sure they have been loaded correctly   See this question and answer  AngularJS dependency injection of value inside of module config     A module is a collection of configuration and run blocks which get   applied to the    application during the bootstrap process  In its   simplest form the module consist of collection of two kinds of blocks       Configuration blocks - get executed during the provider registrations and configuration phase  Only providers and constants   can be injected into configuration blocks  This is to prevent   accidental instantiation of services before they have been fully   configured

User · Answer

I don t think you re supposed to be able to do this  but I have successfully injected a service into a config block   AngularJS v1 0 7   angular module  dogmaService            factory  dogmaCacheBuster             function                 return function path                    return path           Date now                                      angular module  touch              dogmaForm            dogmaValidate            dogmaPresentation            dogmaController            dogmaService               config             routeProvider            dogmaCacheBusterProvider           function  routeProvider  cacheBuster                var bust   cacheBuster  get 0                   routeProvider                  when                            templateUrl  bust  touch customer                        controller   CustomerCtrl                                      when   screen2                         templateUrl  bust  touch screen2                        controller   Screen2Ctrl                                      otherwise                       redirectTo  bust                                             angular module  dogmaController            controller  CustomerCtrl               scope             http             location            dogmaCacheBuster           function  scope   http   location  cacheBuster                  scope submit   function                       ajax                       url  cacheBuster   customers       server script to process data                     type   POST                         Ajax events                        Form data                     data  formData                        Options to tell JQuery not to process data or worry about content-type                     cache  false                      contentType  false                      processData  false                      success  function                              location                              path   screen2                              scope   phase     scope  apply

User · Answer

Set up your service as a custom AngularJS Provider  Despite what the Accepted answer says  you actually CAN do what you were intending to do  but you need to set it up as a configurable provider  so that it s available as a service during the configuration phase    First  change your Service to a provider as shown below   The key difference here is that after setting the value of defer  you set the defer promise property to the promise object returned by  http get   Provider Service   provider  service recipe   app provider  dbService   function dbServiceProvider          the provider recipe for services require you specify a  get function   this  get    dbhost  function dbServiceFactory dbhost           return the factory as a provider         that is available during the configuration phase      return new DbService dbhost                function DbService dbhost       var status       this setUrl   function url           dbhost   url             this getData   function  http            return  http get dbhost  db php score getData                success function data                       handle any special stuff here  I would suggest the following                   status    ok                    status data   data                                error function message                    status    error                    status message   message                                then function                        now we return an object with data or information about error                      for special handling inside your application configuration                  return status                                Now  you have a configurable custom Provider  you just need to inject it  Key difference here being the missing  Provider on your injectable      config   app config function   routeProvider          routeProvider          when                    templateUrl   partials editor html               controller   AppCtrl               resolve                    dbData  function DbService   http                                                  dbServiceProvider returns a dbService instance to your app whenever                        needed  and this instance is setup internally with a promise                          so you don t need to worry about  q and all that                                             return DbService  http   dbhost com   getData                                                     use resolved data in your appCtrl  app controller  appCtrl  function dbData  DbService         scope dbData   dbData           You can also create and use another instance of the dbService here            to do whatever you programmed it to do  by adding functions inside the          constructor DbService    the following assumes you added          a rmUser userObj  function in the factory       scope removeDbUser   function user            DbService rmUser user                Possible Alternatives  The following alternative is a similar approach  but allows definition to occur within the  config  encapsulating the service to within the specific module in the context of your app   Choose the method that right for you   Also see below for notes on a 3rd alternative and helpful links to help you get the hang of all these things  app config function  routeProvider   provide         provide service  dbService  function            set up your service inside the module s config        routeProvider          when                    templateUrl   partials editor html               controller   AppCtrl               resolve                    data                                  A few helpful Resources   John Lindquist has an excellent 5 minute explanation and demonstration of this at egghead io  and it s one of the free lessons  I basically modified his demonstration by making it  http specific in the context of this request View the AngularJS Developer guide on Providers There is also an excellent explanation about factory service provider at clevertech biz    The provider gives you a bit more configuration over the  service method  which makes it better as an application level provider  but you could also encapsulate this within the config object itself by injecting  provide into config like so

User · Answer

Using  injector to call service methods in config  I had a similar issue and resolved it by using the  injector service as shown above  I tried injecting the service directly but ended up with a circular dependency on  http  The service displays a modal with the error and I am using ui-bootstrap modal which also has a dependency on  https        httpProvider interceptors push function  injector        return            responseError   function response                 console log  Error Response status      response status                if  response status     0                    var myService   injector get  myService                    myService showError  An unexpected error occurred  Please refresh the page

User · Answer

Easiest way            injector   angular element document body  injector     Then use that to run invoke   or get

[angularjs] Inject service in app.config

Examples related to angularjs