AngularJS: Inicjalizacja usługi za pomocą danych asynchronicznych

Na podstawie rozwiązania Martina Atkinsa, oto kompletne, zwięzłe rozwiązanie czysto Kątowe:

(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']);
        });
    }
  );
})();

To rozwiązanie używa samoczynnie wykonującej się funkcji anonimowej, aby uzyskać usługę $ http, zażądać konfiguracji i wstrzyknąć ją do stałej o nazwie CONFIG, gdy stanie się dostępna.

Po całkowitym zakończeniu czekamy, aż dokument będzie gotowy, a następnie uruchamiamy aplikację Angular.

Jest to niewielkie ulepszenie w stosunku do rozwiązania Martina, które odroczyło pobieranie config aż do dokument jest gotowy. O ile wiem, nie ma powodu, aby opóźniać wywołanie $ http w tym celu.

Testy Jednostkowe

Uwaga: odkryłem, że to rozwiązanie nie działa dobrze podczas testów jednostkowych, gdy kod jest zawarty w pliku app.js. Powodem tego jest to, że powyższy kod uruchamia się natychmiast po załadowaniu pliku JS. Oznacza to, że Framework testowy (w moim przypadku Jasmine)nie ma możliwości dostarczenia wzorcowej implementacji $http.

Moje rozwiązanie, którym jestem nie do końca zadowolony z, było przeniesienie tego kodu do naszego pliku index.html, więc Infrastruktura testów jednostkowych Grunt/Karma/Jasmine go nie widzi.

Użyłem podobnego podejścia do tego opisanego przez @XMLilley, ale chciałem mieć możliwość korzystania z usług AngularJS, takich jak $http, aby załadować konfigurację i wykonać dalszą inicjalizację bez użycia niskopoziomowych API lub jQuery.

Używanie resolve na trasach również nie było opcją, ponieważ potrzebowałem, aby wartości były dostępne jako stałe podczas uruchamiania aplikacji, nawet w blokach module.config().

Stworzyłem małą aplikację AngularJS, która ładuje config, ustawia je jako stałe na rzeczywistym aplikacja i bootstraps go.

// 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']);
});

Zobacz go w akcji (używając $timeout zamiast $http) tutaj: http://plnkr.co/edit/FYznxP3xe8dxzwxs37hi?p=preview

UPDATE

Zalecałbym zastosowanie podejścia opisanego poniżej przez Martina Atkinsa i JBCP.

UPDATE 2

Ponieważ potrzebowałem go w wielu projektach, właśnie wydałem moduł bowera, który zajmuje się tym: https://github.com/philippd/angular-deferred-bootstrap

Przykład, który ładuje dane z zaplecza i ustawia stałą o nazwie APP_CONFIG na module AngularJS:

deferredBootstrapper.bootstrap({
  element: document.body,
  module: 'MyApp',
  resolve: {
    APP_CONFIG: function ($http) {
      return $http.get('/api/demo-config');
    }
  }
});

Obudowa "manual bootstrap" może uzyskać dostęp do usług Angular poprzez ręczne utworzenie wtryskiwacza przed bootstrap. Ten początkowy wtryskiwacz będzie samodzielny (nie będzie dołączony do żadnych elementów) i będzie zawierał tylko podzbiór modułów, które są ładowane. Jeśli potrzebujesz tylko podstawowych usług kątowych, wystarczy załadować ng, tak:

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']);
            }
        );
    }
);

Możesz na przykład użyć mechanizmu module.constant, Aby udostępnić dane swojej aplikacji:

myApp.constant('myAppConfig', data);

To myAppConfig można teraz wstrzyknąć tylko jak każda inna usługa, a w szczególności jest dostępna w fazie konfiguracji:

myApp.config(
    function (myAppConfig, someService) {
        someService.config(myAppConfig.someServiceConfig);
    }
);

Lub, w przypadku mniejszej aplikacji, możesz po prostu wprowadzić globalną konfigurację bezpośrednio do swojego serwisu, kosztem rozpowszechniania wiedzy na temat formatu konfiguracji w całej aplikacji.

Oczywiście, ponieważ operacje asynchroniczne tutaj zablokują bootstrap aplikacji, a tym samym zablokują kompilację / łączenie szablonu, mądrze jest użyć dyrektywy ng-cloak, aby zapobiec nieużywany szablon z pokazywania się podczas pracy. Możesz również podać jakiś rodzaj wskazania ładowania w DOM, podając jakiś kod HTML, który jest wyświetlany tylko do momentu inicjalizacji AngularJS:

<div ng-if="initialLoad">
    <!-- initialLoad never gets set, so this div vanishes as soon as Angular is done compiling -->
    <p>Loading the app.....</p>
</div>
<div ng-cloak>
    <!-- ng-cloak attribute is removed once the app is done bootstrapping -->
    <p>Done loading the app!</p>
</div>

Stworzyłem kompletny, działający przykład tego podejścia na Plunkerze, ładując konfigurację ze statycznego pliku JSON jako przykład.

Miałem ten sam problem: kocham obiekt resolve, ale to działa tylko dla zawartości ng-view. Co zrobić, jeśli masz Kontrolery (powiedzmy, dla najwyższego poziomu nav), które istnieją poza ng-view i które muszą zostać zainicjowane danymi, zanim routing zacznie się odbywać? Jak uniknąć błaznowania po stronie serwera tylko po to, aby to zadziałało?

Użyj ręcznego Bootstrapa i stałej kątowej . Naiive XHR dostaje Twoje dane, a Ty bootstrap angular w jego callback, który zajmuje się problemami asynchronicznymi. W poniższym przykładzie nie trzeba nawet tworzyć zmiennej globalnej. Zwracane dane istnieją tylko w zakresie kątowym jako iniekcja i nie są nawet obecne wewnątrz sterowników, usług itp. chyba, że wstrzykniesz. (Podobnie jak wstrzyknięcie wyjścia obiektu resolve do kontrolera w celu przekierowania widoku.) Jeśli wolisz później wchodzić w interakcje z tymi danymi jako usługą, możesz utworzyć usługę, wstrzyknąć Dane i nikt nigdy nie będzie mądrzej.

Przykład:

//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();
})

Teraz, twoja NavData stała istnieje. Można go wprowadzić do kontrolera lub serwisu:

angular.module('MyApp')
    .controller('NavCtrl', ['NavData', function (NavData) {
        $scope.localObject = NavData; //now it's addressable in your templates 
}]);

Oczywiście, użycie gołego obiektu XHR usuwa wiele elementów, które $http lub JQuery dadzą ci radę, ale ten przykład działa bez specjalnych zależności, przynajmniej dla prostego get. Jeśli chcesz uzyskać trochę więcej mocy na swoje żądanie, załaduj zewnętrzną bibliotekę, która Ci pomoże. Ale nie wydaje mi się, żeby to było możliwe. angular ' s $http lub innych narzędzi w tym kontekście.

(SO related post)

To, co możesz zrobić, jest w Twoim .config dla aplikacji to Utwórz obiekt resolve dla trasy i w funkcji pass w $q (obiekt promise) I nazwę usługi, od której zależy, i rozwiąż obietnicę w funkcji zwrotnej dla $http w usłudze w następujący sposób:

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 nie wyrenderuje szablonu ani nie udostępni kontrolera do czasu odroczenia.resolve() została wywołana. Możemy to zrobić w naszym serwis:

Serwis

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;
});

Teraz, gdy MyService ma dane przypisane do jego właściwości danych, a obietnica w obiekcie route resolve została rozwiązana, nasz kontroler dla trasy uruchamia się i możemy przypisać dane z usługi do naszego obiektu kontrolera.

CONTROLLER

  app.controller('homeCtrl',function($scope,MyService){
       $scope.servicedata = MyService.data;
  });

Teraz wszystkie nasze powiązania w zakresie kontrolera będą mogły korzystać z danych pochodzących z MyService.

Więc znalazłem rozwiązanie. Stworzyłem usługę angularJS, nazwiemy ją MyDataRepository i stworzyłem do niej moduł. Następnie podaję ten plik javascript z mojego kontrolera po stronie serwera:

HTML:

<script src="path/myData.js"></script>

Server-side:

@RequestMapping(value="path/myData.js", method=RequestMethod.GET)
public ResponseEntity<String> getMyDataRepositoryJS()
{
    // Populate data that I need into a Map
    Map<String, String> myData = new HashMap<String,String>();
    ...
    // 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<String>(myJS , responseHeaders, HttpStatus.OK);
}

Mogę następnie wstrzykiwać MyDataRepository tam, gdzie będę tego potrzebował:

someOtherModule.service('MyOtherService', function(MyDataRepository) {
    var myData = MyDataRepository.getData();
    // Do what you have to do...
}

To działało świetnie dla mnie, ale jestem otwarty na wszelkie opinie, jeśli ktoś ma jakieś. }

Ponadto, możesz użyć następujących technik, aby świadczyć swoje usługi globalnie, zanim rzeczywiste Kontrolery zostaną wykonane: https://stackoverflow.com/a/27050497/1056679 . po prostu rozwiąż swoje dane globalnie, a następnie przekaż je do usługi na przykład w bloku run.

Możesz użyć JSONP do asynchronicznie wczytywania danych usługi. Żądanie JSONP zostanie wykonane podczas początkowego ładowania strony, a wyniki będą dostępne przed rozpoczęciem aplikacji. W ten sposób nie będziesz musiał nadmuchiwać routingu redundantnymi rozwiązaniami.

HTML wyglądałby tak:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script>

function MyService {
  this.getData = function(){
    return   MyService.data;
  }
}
MyService.setData = function(data) {
  MyService.data = data;
}

angular.module('main')
.service('MyService', MyService)

</script>
<script src="/some_data.php?jsonp=MyService.setData"></script>

Najprostszy sposób na pobranie dowolnej inicjalizacji użyj katalogu ng-INIT.

Po prostu umieść zakres ng-INIT div tam, gdzie chcesz pobrać dane init

Indeks.html

<div class="frame" ng-init="init()">
    <div class="bit-1">
      <div class="field p-r">
        <label ng-show="regi_step2.address" class="show-hide c-t-1 ng-hide" style="">Country</label>
        <select class="form-control w-100" ng-model="country" name="country" id="country" ng-options="item.name for item in countries" ng-change="stateChanged()" >
        </select>
        <textarea class="form-control w-100" ng-model="regi_step2.address" placeholder="Address" name="address" id="address" ng-required="true" style=""></textarea>
      </div>
    </div>
  </div>

Indeks.js

$scope.init=function(){
    $http({method:'GET',url:'/countries/countries.json'}).success(function(data){
      alert();
           $scope.countries = data;
    });
  };

UWAGA: możesz użyć tej metodologii, jeśli nie masz tego samego kodu więcej niż jedno miejsce.