Il modo migliore per richiamare le API Rest da angularjs?

Question

Da dove deve essere richiamata la richiesta dell'API REST da angular js?

I.e. dal controller, modulo, servizio, fabbrica. Sono totalmente confuso che quello che dovrebbe essere il modo giusto per farlo?

Answer 1

È possibile utilizzare resources o creare servizi che implementano le chiamate http.

Se si desidera utilizzare le risorse, ricordate:

1. di includere il file angolare resource.js che potete trovare here
2. includere nella vostra dichiarazione del modulo per includere il modulo ngResource dipendenze in questo modo : angular.module('myApp',['ngResource'])

Dopo di che è possibile dichiarare una risorsa in questo modo:

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

In alternativa, utilizzare i servizi, se avete bisogno di un livello molto più profondo di granularità quali

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

trovo servizi di essere grande a causa della capacità di condividere i dati tra i controller, in modo da poterli immettere in un controllore come così

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

}); 

Answer 2

finché si utilizza il servizio $ http doesnt davvero fare alcuna differenza

Sebbene non vi sia la metodologia fornitore di cui si afferma che si dovrebbe avere un provider di dati nel lato client, nonché il lato server

Per questa materia mi suggeriscono una fabbrica che espone i metodi che si desidera e sta utilizzando il servizio $ http stesso

Answer 3

Questo è il modo in cui fare questo, scrivere i Servizio http come metodo factory.

Redatta secondo i commenti di utilizzare 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; 
      } 
     } 
     } 
    ]); 

Ora è possibile utilizzarlo in controller come questo.

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

    $scope.Users = null; 

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

Answer 4

È possibile utilizzare restangular https://github.com/mgonto/restangular

E si chiamerà la vostra api del genere:

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

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

Answer 5

Se la vostra intenzione di utilizzare quella chiamata API REST in più di un controller è meglio creare un servizio che viene iniettato come dipendenza nei controller che ne hanno bisogno. Come già accennato, si desidera utilizzare $ resource per gestire le API RESTful.

indice

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

Riferimento: AngularJS: $resource

Answer 6

Ecco quello che vorrei considerare come migliori pratiche:

• utilizzare un servizio di fabbrica per gestire i meccanismi di accesso al web RESTful API
• Inject il servizio di fabbrica nel controller che necessita dell'accesso
• Utilizzare una promessa in fabbrica su resolv e o respingere la risposta dalla chiamata $ http
• La promessa consente al controller di determinare come deve rispondere al risultato della chiamata RESTful. Ad esempio, potrebbe essere utile richiamare un popup popup per avvisare l'utente di qualsiasi problema.

Ciò mantiene una buona separazione tra il livello del servizio dati, la business logic e l'interfaccia utente frontale. Limita anche le conseguenze delle modifiche a qualsiasi livello, ad altri livelli.