Cách tốt nhất để gọi Rest APIs từ angularjs?

Question

Từ đâu nên yêu cầu REST API được gọi từ js góc?

I.e. từ bộ điều khiển, mô-đun, dịch vụ, nhà máy. Tôi hoàn toàn bối rối rằng những gì nên là đúng cách cho nó?

Answer 1

Bạn có thể sử dụng resources hoặc xây dựng các dịch vụ triển khai cuộc gọi http.

Nếu bạn muốn sử dụng các nguồn lực, hãy nhớ:

1. cần bao gồm tệp góc-resource.js mà bạn có thể tìm here
2. để đưa vào khai module của bạn để bao gồm các phụ thuộc mô-đun ngResource như vậy : angular.module('myApp',['ngResource'])

Sau đó bạn có thể khai báo một tài nguyên theo cách này:

function MyController($scope, $resource){ 
    var User = $resource('/user/:userId', {userId:'@id'}); 
    var user = User.get({userId:123}, function() { 
    user.abc = true; 
    user.$save(); 
    }); 
} 

Ngoài ra, sử dụng dịch vụ nếu bạn cần một mức độ sâu hơn nhiều granularity như

angular.module('myApp') 
.factory('MyAPIService', function($http){ 
    var apiurl, myData; 
    return { 
    getData: function(){ 
     $http.get(apiurl) 
     .success(function(data, status, config, headers){ 
     myData = data; 
     }) 
     .error(function(){ //handler errors here 
     }); 
    }, 
    data: function() { return myData; } 
    }; 
}); 

tôi thấy dịch vụ cho là tuyệt vời vì khả năng chia sẻ dữ liệu giữa các bộ điều khiển, vì vậy bạn có thể tiêm chúng vào một bộ điều khiển như nên

myapp.controller('MyController', function($scope, MyAPIService){ 
    $scope.data = MyAPIService.data(); 
    // etc. 

}); 

Answer 2

chừng nào bạn sử dụng dịch vụ $ http nó không thực sự thực hiện bất kỳ sự khác biệt

Mặc dù phương pháp cung cấp dịch vụ trong đó nêu rằng bạn nên có một cung cấp dữ liệu ở phía khách hàng cũng như phía máy chủ

Đối với vấn đề này tôi đề nghị một nhà máy mà đưa ra phương án bạn muốn và đang sử dụng dịch vụ $ http tự

Answer 3

Đây là cách chúng ta làm điều này, Viết http dịch vụ theo phương thức factory.

Chỉnh sửa theo ý kiến ​​để sử dụng Promise API

var MyApp = angular.module('App', []); 

MyApp .factory('ApiFactory', ['$http', 
     function ($http) { 
      return { 
       getUsers: function (rowcount) { 
       var promise = $http.get('api/Users/' + rowcount) .then(function(response) { 
       return response.data; 
       }, function (error) { 
       //error 
      }) 
      return promise; 
      } 
     } 
     } 
    ]); 

Bây giờ bạn có thể sử dụng nó trong controller như thế này.

MyApp .controller('MyController', ['$scope', 'ApiFactory', 
    function ($scope, ApiFactory) { 

    $scope.Users = null; 

    ApiFactory.getUsers(count).then(function(data) 
    { 
     $scope.Users = data; 
    }); 
} 
]); 

Answer 4

Bạn có thể sử dụng restangular https://github.com/mgonto/restangular

Và bạn sẽ gọi api của bạn như thế:

// Only stating main route 
Restangular.all('accounts') 

// Stating main object 
Restangular.one('accounts', 1234) 

Answer 5

Nếu bạn sẽ sử dụng cuộc gọi REST API trong nhiều hơn một bộ điều khiển nó là tốt nhất để tạo một dịch vụ được tiêm như một sự phụ thuộc vào các bộ điều khiển cần nó. Như đã đề cập, bạn muốn sử dụng $ resource để xử lý các API RESTful.

chỉ mục.html:

<!-- Include Angular and angular-resources --> 
<script src="angular.js"></script> 
<script src="angular-resource.js"></script> 

<!-- Set up your angular module --> 
<div ng-app="RESTfulServiceExample"> 
    <div ng-controller="HomeController"> 
     <ul> 
      <li ng-repeat="game in games">{{game.GameName}}</li> 
     </ul> 
    </div> 
</div> 

<script> 
    // Inject angular-resource as ngResource into your module 
    var gameListApp = angular.module('RESTfulServiceExample', ['ngResource']); 

    // Create a service to call API which can be used by many controllers 
    gameListApp.factory('GameService', ['$resource', function($resource) { 
     return $resource('/game/:gameId', {gameId: '@id'}); 
    }]); 

    // Create a controller that uses your service 
    gameListApp.controller('HomeController', function($scope, GameService) { 
     // GET: /game/ 
     var games = GameService.query(); 

     // Use response in HTML template 
     $scope.games = games; 
    }); 

    // Another controller could use the same service 
    gameListApp.controller('GameController', function($scope, GameService) { 
     // use GameService for another purpose 
    }); 
</script> 

tham khảo: AngularJS: $resource

Answer 6

Đây là những gì tôi sẽ coi thực hành một cách tốt nhất:

• Sử dụng dịch vụ nhà máy để xử lý các cơ chế truy cập vào các api web RESTful
• Tiêm dịch vụ nhà máy vào bộ điều khiển cần truy cập
• Sử dụng lời hứa trong nhà máy để giải quyết e hoặc từ chối phản hồi từ cuộc gọi $ http
• Lời hứa cho phép trình điều khiển xác định cách nó sẽ phản hồi kết quả của cuộc gọi RESTful. Ví dụ, nó có thể muốn gọi một cửa sổ bật lên bánh mì nướng để thông báo cho người dùng về bất kỳ vấn đề nào.

Điều này duy trì sự tách biệt tốt giữa lớp dịch vụ dữ liệu, logic nghiệp vụ và giao diện người dùng mặt trước. Nó cũng giới hạn bất kỳ hậu quả của những thay đổi đối với bất kỳ lớp nào, đến các lớp khác.