Giải quyết lời hứa trong một dịch vụ/nhà máy so với một bộ điều khiển với AngularJS

Question

Vì vậy, tôi đã chơi xung quanh với lời hứa giải quyết trong một dịch vụ so với bộ điều khiển. Tôi muốn giải quyết nó trong dịch vụ để tôi có thể tái sử dụng biến mà không cần phải giải quyết nó nhiều lần.

Sự cố tôi gặp phải là nó hoạt động nhưng nó trả về dữ liệu rất chậm. Vì vậy, tôi cảm thấy như tôi đang làm điều gì sai ở đây. nó mất khoảng 5 hoặc 6 giây cho ng-tùy chọn của tôi để cư trú. Cái nào tốt hơn? Và làm thế nào tôi có thể cải thiện mã của tôi để nó chạy nhanh hơn?

Resolved Trong dịch vụ:

resortModule.factory('locaService',['$http', '$rootScope', function ($http, $rootScope){ 
    locaService.getLocations= 
     function() { 
      return $http.get('/api/destinations').then(
       function(result){ 
        locaService.locations= result.data; 
        return locaService.locations; 
       } 
      ); 
     return locaService.locations; 
    }; 
resortModule.controller('queryController',['$scope', 'locaService', function($scope, locaService) { 
    $scope.getLocations= locaService.getLocations().then(function(result){ 
     $scope.locations= result; 
    }); 
}]); 

giải quyết trong Bộ điều khiển:

resortModule.factory('locaService',['$http', '$rootScope', function ($http, $rootScope){ 
locaService.getLocations= 
    function() { 
     locaService.locations= $http.get('/api/destinations'); 
     //stores variable for later use 
     return locaService.locations; 
    }; 
}]); 
resortModule.controller('queryController',['$scope', 'locaService',   
    function($scope, locaService) { 
     locaService.getLocations() 
     .then(
      function(locations) // $http returned a successful result 
      {$scope.locations = locations;} //set locations to returned data 
     ,function(err){console.log(err)}); 
}]); 

HTML:

<select ng-click="selectCheck(); hideStyle={display:'none'}" name="destination" ng-style="validStyle" ng-change="getResorts(userLocation); redirect(userLocation)" class="g-input" id="location" ng-model="userLocation"> 
    <option value=''>Select Location</option> 
    <option value='/destinations'>All</option> 
    <option value="{{loca.id}}" ng-repeat="loca in locations | orderBy: 'name'">{{loca.name}}</option> 
</select> 

Answer 1

Trong góc, dịch vụ là độc thân nên chỉ có một ví dụ trong ứng dụng của bạn . Điều này cho phép bạn giải quyết dữ liệu một lần (trong dịch vụ của bạn), lưu trữ dữ liệu và sau đó trên các cuộc gọi tiếp theo, chỉ cần trả lại dữ liệu đã được giải quyết. Điều này sẽ cho phép bạn không giải quyết dữ liệu của bạn nhiều lần và cũng giữ cho logic của bạn được tách biệt giữa dịch vụ và bộ điều khiển.

CẬP NHẬT - bộ nhớ cache lời hứa thay vào đó, nhờ yvesmancera cho các lỗi tìm

resortModule.factory('locaService', ['$http', '$rootScope', function ($http, $rootScope) { 
    var locationsPromise = null; 

    locaService.getLocations = 
     function() { 
      if (locationsPromise == null) { 
       locationsPromise = $http.get('/api/destinations').then(
        function(result) { 
         return result.data; 
        } 
       ); 
      } 

      return locationsPromise; 
     }; 

    ... 
} 

resortModule.controller('queryController',['$scope', 'locaService', function($scope, locaService) { 
    $scope.getLocations= locaService.getLocations().then(function(result) { 
     $scope.locations= result; 
    }); 
}]); 

Theo như tăng tốc tải dữ liệu của bạn, tôi không thấy bất cứ điều gì sai trái với javascript của bạn. Nó chỉ có thể là cuộc gọi api của bạn mất rất nhiều thời gian. Nếu bạn đăng mã liên quan đến HTML của mình, chúng tôi có thể kiểm tra và xem liệu có điều gì có thể làm chậm nó không.