Лучший способ вызвать Rest API из angularjs?

Ответ 1

Вы можете использовать ресурсы или создавать службы, реализующие http-вызовы.

Если вы хотите использовать ресурсы, помните:

• чтобы включить angular -resource.js файл, который вы можете найти здесь
• включить в объявление вашего модуля, чтобы включить зависимость модуля ngResource следующим образом: angular.module('myApp',['ngResource'])

После этого вы можете объявить ресурс таким образом:

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

Кроме того, используйте службы, если вам нужен гораздо более глубокий уровень детализации, например

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

Я считаю, что услуги отличные из-за возможности обмена данными между контроллерами, поэтому вы можете вводить их в контроллер таким образом

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

});

Ответ 2

Вот что я считаю лучшей практикой:

• Используйте службу factory для обработки механики доступа к веб-сайту RESTful api
• Ввести службу factory в контроллер, которому нужен доступ
• Используйте обещание в factory to разрешить или отклонить ответ от вызова $http
• Обещание позволяет контроллеру определить, как он должен реагировать на результат вызова RESTful. Например, он может захотеть вызывать всплывающее сообщение тоста, чтобы уведомить пользователя о любой проблеме.

Это поддерживает хорошее разделение между уровнем обслуживания данных, бизнес-логикой и интерфейсом интерфейса. Он также ограничивает любые последствия изменений для любого слоя, для других слоев.

Ответ 3

Вот как мы это делаем: напишите http как метод factory.

Отредактировано в соответствии с комментариями для использования 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;
           }
         }
       }
   ]);

Теперь вы можете использовать его в controller как это.

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

    $scope.Users = null;

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

Ответ 4

Вы можете использовать restangular https://github.com/mgonto/restangular

И вы вызовете свой api следующим образом:

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

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

Ответ 5

Пока вы используете службу $http, она действительно не имеет никакого значения.

Хотя существует методология провайдера, в которой говорится, что у вас должен быть поставщик данных на стороне клиента, а также на стороне сервера

Для этого я предлагаю factory, который предоставляет методы, которые вы хотите, и использует сам сервис $http

Ответ 6

Если вы собираетесь использовать этот вызов REST API более чем в одном контроллере, лучше создать службу, которая вводится как зависимость в нужные ей контроллеры. Как уже упоминалось, вы хотите использовать $resource для обработки API RESTful.

index.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>

Ссылка: AngularJS: $resource