AngularJS Initialize service with asynchronous data

Question

I have an AngularJS service that I want to initialize with some asynchronous data  Something like this   myModule service  MyService   function  http        var myData   null        http get  data json   success function  data            myData   data               return           setData  function  data                myData   data                     doStuff  function                  return myData getSomeData                           Obviously this won t work because if something tries to call doStuff   before myData gets back I will get a null pointer exception  As far as I can tell from reading some of the other questions asked here and here I have a few options  but none of them seem very clean  perhaps I am missing something    Setup Service with  run   When setting up my app do this   myApp run function   http  MyService         http get  data json   success function  data            MyService setData data                 Then my service would look like this   myModule service  MyService   function         var myData   null      return           setData  function  data                myData   data                     doStuff  function                  return myData getSomeData                           This works some of the time but if the asynchronous data happens to take longer than it takes for everything to get initialized I get a null pointer exception when I call doStuff    Use promise objects  This would probably work  The only downside it everywhere I call MyService I will have to know that doStuff   returns a promise and all the code will have to us then to interact with the promise  I would rather just wait until myData is back before loading the my application   Manual Bootstrap   angular element document  ready function           getJSON  data json   function  data              can t initialize the data here because the service doesn t exist yet        angular bootstrap document             too late to initialize here because something may have already           tried to call doStuff   and would have got a null pointer exception               Global Javascript Var I could send my JSON directly to a global Javascript variable   HTML    lt script type  text javascript  src  data js  gt  lt  script gt    data js   var dataForMyService         myData here      Then it would be available when initializing MyService   myModule service  MyService   function         var myData   dataForMyService      return           doStuff  function                  return myData getSomeData                           This would work too  but then I have a global javascript variable which smells bad   Are these my only options  Are one of these options better than the others  I know this is a pretty long question  but I wanted to show that I have tried to explore all my options  Any guidance would greatly be appreciated

User · Answer

You can use JSONP to asynchronously load service data  The JSONP request will be made during the initial page load and the results will be available before your application starts  This way you won t have to bloat your routing with redundant resolves   You html would look like this    lt script src  https   ajax googleapis com ajax libs angularjs 1 2 23 angular min js  gt  lt  script gt   lt script gt   function MyService     this getData   function        return   MyService data        MyService setData   function data      MyService data   data     angular module  main    service  MyService   MyService    lt  script gt   lt script src   some data php jsonp MyService setData  gt  lt  script gt

User · Answer

Have you had a look at  routeProvider when   path    resolve        It can make the promise approach a bit cleaner   Expose a promise in your service    app service  MyService   function  http        var myData   null       var promise    http get  data json   success function  data          myData   data               return         promise promise        setData  function  data              myData   data                 doStuff  function                return myData    getSomeData                         Add resolve to your route config   app config function  routeProvider      routeProvider      when      controller  MainCtrl       template   lt div gt From MyService  lt pre gt   data   json   lt  pre gt  lt  div gt        resolve          MyServiceData  function MyService              MyServiceData will also be injectable in your controller  if you don t want this you could create a new promise with the  q service         return MyService promise                          Your controller won t get instantiated before all dependencies are resolved   app controller  MainCtrl   function  scope MyService      console log  Promise is now resolved    MyService doStuff   data     scope data   MyService doStuff          I ve made an example at plnkr  http   plnkr co edit GKg21XH0RwCMEQGUdZKH p preview

User · Answer

So I found a solution  I created an angularJS service  we ll call it MyDataRepository and I  created a module for it  I then serve up this javascript file from my server-side controller   HTML    lt script src  path myData js  gt  lt  script gt    Server-side    RequestMapping value  path myData js   method RequestMethod GET  public ResponseEntity lt String gt  getMyDataRepositoryJS            Populate data that I need into a Map     Map lt String  String gt  myData   new HashMap lt String String gt                    Use Jackson to convert it to JSON     ObjectMapper mapper   new ObjectMapper        String myDataStr   mapper writeValueAsString myData           Then create a String that is my javascript file     String myJS     use strict            function             var myDataModule   angular module  myApp myData                myDataModule service  MyDataRepository   function                 var myData     myDataStr                return                   getData  function                          return myData                                                                     Now send it to the client      HttpHeaders responseHeaders   new HttpHeaders        responseHeaders add  Content-Type    text javascript        return new ResponseEntity lt String gt  myJS   responseHeaders  HttpStatus OK       I can then inject MyDataRepository where ever I need it   someOtherModule service  MyOtherService   function MyDataRepository        var myData   MyDataRepository getData           Do what you have to do        This worked great for me  but I am open to any feedback if anyone has any

User · Answer

Also  you can use the following techniques to provision your service globally  before actual controllers are executed  https   stackoverflow com a 27050497 1056679  Just resolve your data globally and then pass it to your service in run block for example

User · Answer

I had the same problem  I love the resolve object  but that only works for the content of ng-view  What if you have controllers  for top-level nav  let s say  that exist outside of ng-view and which need to be initialized with data before the routing even begins to happen  How do we avoid mucking around on the server-side just to make that work   Use manual bootstrap and an angular constant  A naiive XHR gets you your data  and you bootstrap angular in its callback  which deals with your async issues  In the example below  you don t even need to create a global variable  The returned data exists only in angular scope as an injectable  and isn t even present inside of controllers  services  etc  unless you inject it   Much as you would inject the output of your resolve object into the controller for a routed view   If you prefer to thereafter interact with that data as a service  you can create a service  inject the data  and nobody will ever be the wiser   Example     First  we have to create the angular module  because all the other JS files are going to load while we re getting data and bootstrapping  and they need to be able to attach to it  var MyApp   angular module  MyApp     dependency1    dependency2         Use angular s version of document ready   just to make extra-sure DOM is fully     loaded before you bootstrap  This is probably optional  given that the async     data call will probably take significantly longer than DOM load  YMMV     Has the added virtue of keeping your XHR junk out of global scope   angular element document  ready function            first  we create the callback that will fire after the data is down     function xhrCallback             var myData   this responseText     the XHR output             here s where we attach a constant containing the API data to our app             module  Don t forget to parse JSON  which   http  normally does for you          MyApp constant  NavData   JSON parse myData                now  perform any other final configuration of your angular module          MyApp config    routeProvider   function   routeProvider                 routeProvider                when   someroute    configs                  otherwise  redirectTo    someroute                                And last  bootstrap the app  Be sure to remove  ng-app  from your index html          angular bootstrap document    NYSP                   here  the basic mechanics of the XHR  which you can customize      var oReq   new XMLHttpRequest        oReq onload   xhrCallback      oReq open  get     api overview   true      your specific API URL     oReq send         Now  your NavData constant exists  Go ahead and inject it into a controller or service    angular module  MyApp        controller  NavCtrl     NavData   function  NavData             scope localObject   NavData    now it s addressable in your templates         Of course  using a bare XHR object strips away a number of the niceties that  http or JQuery would take care of for you  but this example works with no special dependencies  at least for a simple get  If you want a little more power for your request  load up an external library to help you out  But I don t think it s possible to access angular s  http or other tools in this context     SO related post

User · Answer

Based on Martin Atkins  solution  here is a complete  concise pure-Angular solution    function       var initInjector   angular injector   ng       var  http   initInjector get   http       http get   config json   then      function  response          angular module  config       constant  CONFIG   response data          angular element document  ready function               angular bootstrap document    myApp                                    This solution uses a self-executing anonymous function to get the  http service  request the config  and inject it into a constant called CONFIG when it becomes available    Once completely  we wait until the document is ready and then bootstrap the Angular app    This is a slight enhancement over Martin s solution  which deferred fetching the config until after the document is ready  As far as I know  there is no reason to delay the  http call for that    Unit Testing  Note  I have discovered this solution does not work well when unit-testing when the code is included in your app js file  The reason for this is that the above code runs immediately when the JS file is loaded  This means the test framework  Jasmine in my case  doesn t have a chance to provide a mock implementation of  http    My solution  which I m not completely satisfied with  was to move this code to our index html file  so the Grunt Karma Jasmine unit test infrastructure does not see it

User · Answer

I used a similar approach to the one described by  XMLilley but wanted to have the ability to use AngularJS services like  http to load the configuration and do further initialization without the use of low level APIs or jQuery   Using resolve on routes was also not an option because I needed the values to be available as constants when my app is started  even in module config   blocks   I created a small AngularJS app that loads the config  sets them as constants on the actual app and bootstraps it      define the module of your app angular module  MyApp            define the module of the bootstrap app var bootstrapModule   angular module  bootstrapModule            the bootstrapper service loads the config and bootstraps the specified app bootstrapModule factory  bootstrapper   function   http   log   q      return       bootstrap  function  appName          var deferred    q defer            http get   some url            success function  config                 set all returned values as constants on the app              var myApp   angular module appName             angular forEach config  function value  key               myApp constant key  value                                 and bootstrap the actual app            angular bootstrap document   appName              deferred resolve                        error function                 log warn  Could not initialize application  configuration could not be loaded               deferred reject                       return deferred promise                     create a div which is used as the root of the bootstrap app var appContainer   document createElement  div        in run   function you can now use the bootstrapper service and shutdown the bootstrapping app after initialization of your actual app bootstrapModule run function  bootstrapper       bootstrapper bootstrap  MyApp   then function             removing the container will destroy the bootstrap app     appContainer remove                   make sure the DOM is fully loaded before bootstrapping  angular element document  ready function       angular bootstrap appContainer    bootstrapModule           See it in action  using  timeout instead of  http  here  http   plnkr co edit FYznxP3xe8dxzwxs37hi p preview  UPDATE  I would recommend to use the approach described below by Martin Atkins and JBCP   UPDATE 2  Because I needed it in multiple projects  I just released a bower module that takes care of this  https   github com philippd angular-deferred-bootstrap  Example that loads data from the back-end and sets a constant called APP CONFIG on the AngularJS module   deferredBootstrapper bootstrap     element  document body    module   MyApp     resolve        APP CONFIG  function   http          return  http get   api demo-config

User · Answer

What you can do is in your  config for the app is create the resolve object for the route and in the function pass in  q  promise object  and the name of the service you re depending on  and resolve the promise in the callback function for the  http in the service like so   ROUTE CONFIG  app config function  routeProvider        routeProvider       when                 templateUrl   home html             controller   homeCtrl             resolve function  q MyService                      create the defer variable and pass it to our service                 var defer    q defer                    MyService fetchData defer                     this will only return when the promise                   has been resolved  MyService is going to                   do that for us                 return defer promise                           Angular won t render the template or make the controller available until defer resolve   has been called  We can do that in our service   SERVICE  app service  MyService  function  http          var MyService                our service accepts a promise object which           it will resolve on behalf of the calling function        MyService fetchData   function q                  http  method  GET  url  data php    success function data                    MyService data   data                     when the following is called it will                    release the calling function  in this                    case it s the resolve function in our                    route config                  q resolve                                    return MyService        Now that MyService has the data assigned to it s data property  and the promise in the route resolve object has been resolved  our controller for the route kicks into life  and we can assign the data from the service to our controller object   CONTROLLER    app controller  homeCtrl  function  scope MyService           scope servicedata   MyService data          Now all our binding in the scope of the controller will be able to use the data which originated from MyService

User · Answer

The  manual bootstrap  case can gain access to Angular services by manually creating an injector before bootstrap  This initial injector will stand alone  not be attached to any elements  and include only a subset of the modules that are loaded  If all you need is core Angular services  it s sufficient to just load ng  like this   angular element document  ready      function             var initInjector   angular injector   ng             var  http   initInjector get   http             http get   config json   then              function  response                   var config   response data                    Add additional services constants variables to your app                    and then finally bootstrap it                 angular bootstrap document    myApp                                         You can  for example  use the module constant mechanism to make data available to your app   myApp constant  myAppConfig   data     This myAppConfig can now be injected just like any other service  and in particular it s available during the configuration phase   myApp config      function  myAppConfig  someService            someService config myAppConfig someServiceConfig              or  for a smaller app  you could just inject the global config directly into your service  at the expense of spreading knowledge about the configuration format throughout the application   Of course  since the async operations here will block the bootstrap of the application  and thus block the compilation linking of the template  it s wise to use the ng-cloak directive to prevent the unparsed template from showing up during the work  You could also provide some sort of loading indication in the DOM   by providing some HTML that gets shown only until AngularJS initializes    lt div ng-if  initialLoad  gt       lt  -- initialLoad never gets set  so this div vanishes as soon as Angular is done compiling -- gt       lt p gt Loading the app      lt  p gt   lt  div gt   lt div ng-cloak gt       lt  -- ng-cloak attribute is removed once the app is done bootstrapping -- gt       lt p gt Done loading the app  lt  p gt   lt  div gt    I created a complete  working example of this approach on Plunker  loading the configuration from a static JSON file as an example

User · Answer

Easiest way to fetch any initialize use ng-init directory   Just put ng-init div scope where you want to fetch init data  index html   lt div class  frame  ng-init  init    gt       lt div class  bit-1  gt         lt div class  field p-r  gt           lt label ng-show  regi step2 address  class  show-hide c-t-1 ng-hide  style    gt Country lt  label gt           lt select class  form-control w-100  ng-model  country  name  country  id  country  ng-options  item name for item in countries  ng-change  stateChanged     gt           lt  select gt           lt textarea class  form-control w-100  ng-model  regi step2 address  placeholder  Address  name  address  id  address  ng-required  true  style    gt  lt  textarea gt         lt  div gt       lt  div gt     lt  div gt    index js   scope init function         http  method  GET  url   countries countries json    success function data         alert                scope countries   data                    NOTE  you can use this methodology if you do not have same code more then one place

[javascript] AngularJS : Initialize service with asynchronous data

Examples related to javascript

Examples related to angularjs

Examples related to asynchronous

Examples related to service

Examples related to angular-promise