[javascript] AngularJS : 비동기 데이터로 서비스 초기화

나는 같은 문제가 있었다 : 나는 resolve물건을 좋아 하지만 ng-view의 내용에서만 작동합니다. ng-view 외부에 존재하고 라우팅이 시작되기 전에 데이터로 초기화 해야하는 컨트롤러 (최상위 탐색 용)가 있다면 어떻게됩니까? 서버 측에서 어떻게 작동하는지 막기 위해 어떻게해야합니까?

수동 부트 스트랩과 각도 상수를 사용하십시오 . 기본 XHR은 데이터를 가져오고 콜백에서 각도를 부트 스트랩하여 비동기 문제를 처리합니다. 아래 예에서는 전역 변수를 만들 필요조차 없습니다. 반환 된 데이터는 주사 가능한 각도 범위에만 존재하며, 주입하지 않는 한 컨트롤러, 서비스 등에도 존재하지 않습니다. ( resolve라우팅 된 뷰를 위해 객체 의 출력을 컨트롤러에 주입하는 것과 같이) 서비스로 해당 데이터와 상호 작용하려는 경우 서비스를 생성하고 데이터를 주입하면 아무도 더 현명하지 않습니다. .

예:

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

이제 NavData상수가 존재합니다. 계속해서 컨트롤러 또는 서비스에 주입하십시오.

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

물론 베어 XHR 객체를 사용하면 $httpJQuery가 처리 할 수 있는 많은 장점을 제거 할 수 있지만이 예제는 최소한 간단한 의존성을 위해 특별한 종속성없이 작동합니다 get. 요청에 대해 더 많은 권한을 원할 경우 외부 라이브러리를로드하여 도움을 받으십시오. 그러나이 $http맥락에서 각도 또는 다른 도구에 액세스하는 것이 가능하지 않다고 생각합니다 .

(SO 관련 게시물 )

답변

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

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

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

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

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

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