AngularJS $http and $resource

I am newly exposed to AngularJS, so please forgive my ignorance.

I have some web services that I want to call. $resource or $http , which one should I use?

$resource : https://docs.angularjs.org/api/ngResource/service/$resource

$http : https://docs.angularjs.org/api/ng/service/$http

After I read the two above API pages I am lost.

Could you please explain to me in plain English what is the difference and in what situation should I use them? How do I structure these calls and read the results into js objects correctly?

---

$http is for general purpose AJAX. In most cases this is what you'll be using. With $http you're going to be making GET , POST , DELETE type calls manually and processing the objects they return on your own.

$resource wraps $http for use in RESTful web API scenarios.

---

Speaking VERY generally: A RESTful web service will be a service with one endpoint for a data type that does different things with that data type based on HTTP methods like GET , POST , PUT , DELETE , etc. So with a $resource , you can call a GET to get the resource as a JavaScript object, then alter it and send it back with a POST , or even delete it with DELETE .

... if that makes sense.

---

I feel that other answers, while correct, don't quite explain the root of the question: REST is a subset of HTTP . This means everything that can be done via REST can be done via HTTP but not everything that can be done via HTTP can be done via REST . That is why $resource uses $http internally.

So, when to use each other?

If all you need is REST , that is, you are trying to access a RESTful webservice, $resource is going to make it super easy to interact with that webservice.

If instead, you're trying to access ANYTHING that is not a RESTful webservice, you're going to have to go with $http . Keep in mind, you could also access a RESTful webservice via $http , it will just be much more cumbersome than with $resource . This is the way most people have been doing it outside AngularJS, by using jQuery.ajax (equivalent of Angular's $http ).

---

$http makes general purpose AJAX call, in which general means it can include RESTful api plus Non-RESTful api.

and $resource is specialized for that RESTful part.

Restful Api came to prevalent in recent years because the url is better organized instead of random url made up by programmers.

If I use a RESTful API to construct the url, it would be something like /api/cars/:carId .

$resource way to fetch data

angular.module('myApp', ['ngResource'])

    // Service
    .factory('FooService', ['$resource', function($resource) {
        return $resource('/api/cars/:carId')
    }]);

    // Controller
    .controller('MainController', ['FooService', function(FooService){
        var self = this;
        self.cars = FooService.query();
        self.myCar = FooService.get('123');

    }]);

This will give you an resource object, which is accompanied with get , save , query , remove , delete methods automatically.

$http way to fetch data

angular.module('myApp', [])

    // Service
    .factory('FooService', ['$http', function($http){
        return {
            query: function(){
                return $http.get('/api/cars');
            },

            get: function(){
                return $http.get('/api/cars/123');
            }
            // etc...
        }

See how we need to define each common operation on RESTFul API. Also one difference is that $http returns promise while $resource returns an object. There are also third-party plugins to help Angular deal with RESTFul API like restangular

---

If the API is something like /api/getcarsinfo . All left for us is to use $http .

链接地址: http://www.djcxy.com/p/13642.html

上一篇: AngularJS：$ observe和$ watch方法之间的区别

下一篇: AngularJS $ http和$资源