포스 앵귤러컨트롤러를 로드하기 전에 데이터를 반환하는 JS 서비스

포스 앵귤러컨트롤러를 로드하기 전에 데이터를 반환하는 JS 서비스

저는 Angular에서 API를 사용하여 사용자 정보를 가져와 컨트롤러에 제공하는 서비스를 가지고 있습니다.다음과 같이 설정되어 있습니다.

angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'ngResource', 'infinite-scroll', 'ui.bootstrap', 'ngCookies', 'seo'])
  .service('userInfo', function($http, $cookies){
    $http.get('/api/users/' + $cookies.id).
    success(function(data) {
      var userInfo = data.user[0];

      return userInfo;
    });
  }). // other stuff comes after this

컨트롤러에는 다음과 같이 포함되어 있습니다.

function userProfile($scope, $cookies, userInfo, $http, $resource, $routeParams, $rootScope){
    $scope.user = userInfo;
    console.log('user info is')
    console.log(userInfo);

이것은 데이터를 반환하지 않지만 컨트롤러 자체에 동일한 서비스 기능을 넣으면 정상적으로 반환됩니다.내가 뭘 놓쳤지?이전에 Angular에서 DI/Services를 사용한 적이 없기 때문에 어딘가에 단순한 실수가 있을 수 있습니다.

컨트롤러가 로드되기 전에 서비스가 데이터를 반환하는지 확인해야 합니다.어떻게 하면 좋을까요?

공장에서 다음과 같은 약속을 반환하도록 할 수 있습니다.

angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'ngResource', 'infinite-scroll', 'ui.bootstrap', 'ngCookies', 'seo'])
    .service('userInfo', function ($http, $cookies) {
    var promise = $http.get('/api/users/' + $cookies.id).
    success(function (data) {
        var userInfo = data.user[0];
        return userInfo;
    });
    return promise;
}) // other stuff comes after this

그리고 컨트롤러에서

function userProfile($scope, $cookies, userInfo, $http, $resource, $routeParams, $rootScope){
    userInfo.then(function(data){
        $scope.user = data;
    });
}

이를 통해 서비스를 사용할 때마다 항상 데이터를 동기화할 수 있으므로 컨트롤러를 로드하기 전에 데이터를 로드할 필요가 없습니다.

당신의.userInfo서비스가 반환한 약속을 반환해야 합니다.$http이 약속은 컨트롤러에 삽입되어 해당 약속이 정상적으로 해결되는 대로 뷰가 업데이트됩니다.

---

보기를 렌더링하지 않으려면userInfo해결 방법:resolve루트의 속성을 설정하고, 거기에 서비스를 주입합니다.

$routeProvider.when('/profile', {
    templateUrl: 'profile',
    controller: userProfile,
    resolve: {
         userInfoData: function ($q, userInfo) {
             return userInfo;
         }
    }
});

그럼 그냥 주사해userInfoData컨트롤러에 접속하여userInfo서비스.

$http.get(url)을 반환하도록 변수에 리소스 개체를 할당할 수 있습니다.

$리소스를 사용하여 데이터를 서비스에 로드하고 컨트롤러 $scope로 데이터를 가져와야 하는 동일한 문제에 직면했습니다.약속을 직접 되돌려 컨트롤러에서 리졸버를 사용하고 싶지는 않았지만(@zsong이 쓴 것처럼) 모든 마법을 한 번 서비스에 넣고 @Joseph Silber가 지적한 대로 $scope에 직접 약속을 할당하는 기능을 사용하고 싶었기 때문에 다음과 같이 했습니다.

return function($scope){promise.then(function(data){$scope.user = data})};

컨트롤러에서 다음과 같이 사용하였습니다.

userInfo($scope);

크게 개선되지는 않았지만 컨트롤러에서 보다 명확한 구문을 사용할 수 있게 되었습니다. 3년 후에도 도움이 되었으면 합니다.

언급URL : https://stackoverflow.com/questions/18477711/force-angularjs-service-to-return-data-before-loading-controller