编程习武 — 上来就是干！angular-ngResource

本文详细介绍了AngularJS中ngResource模块的使用方法，包括如何配置资源请求、理解资源请求参数及返回结果等，并通过示例代码展示了如何进行GET、POST等HTTP请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ngResource 用法姿势

入门配置

$resource(url, [params], [actions], options);

参数说明

参数名说明描述
url 发送请求的uri资源地址
params 发送请求时的请求参数
actions 内置或自定义请求方法
options 其他参数

参数名	说明描述
url	发送请求的uri资源地址
params	发送请求时的请求参数
actions	内置或自定义请求方法
options	其他参数

举个栗子：

$resource(
    /***
    * @url  允许占位符
    ***/
    'http://example.com/:id',

    /***
    * @params  id为对应url的占位符，不存在则追加到url后面
    * 最终URL结果：http://example.com/11?str=Hello
    ***/
    {
        id:'11', 
        str:'Hello'
    }, 

    /***
    * @actions  get、save、query、remove、delete为默认方法
    * update为自定义方法，更多方法参数可参照$http.config
    * ** @isArray 请求返回结果是否为数组格式，如果为true则返回数据结果必须为数组格式，默认返回结果为json对象，否则程序报错
    ***/
    { 
        'update': {method:'PUT'},
        'get':    {method:'GET'},
        'save':   {method:'POST'},
        'query':  {method:'GET', isArray:true},
        'remove': {method:'DELETE'},
        'delete': {method:'DELETE'} 
    }   
)

大片文字描述？( It not my way )，实例走一波

依赖文件少不了 - —— - 依赖版本1.5.8不能错

<script src="http://cdn.bootcss.com/angular-resource/1.5.8/angular-resource.js"></script>
<script src="http://cdn.bootcss.com/angular.js/1.5.8/angular.js"></script>

正文

<!DOCTYPE html>
<html ng-app="myApp">
    <head>
        <meta charset="utf-8">
        <script src="http://cdn.bootcss.com/angular-resource/1.5.8/angular-resource.js"></script>
        <script src="http://cdn.bootcss.com/angular.js/1.5.8/angular.js"></script>
    </head>
    <body ng-controller="resourceCtrl">
    </body>
    <script>
        //启动angular应用，并依赖ngResource
        var app = angular.module("myApp",["ngResource"]);

        //控制器实例
        app.controller("resourceCtrl",["$resource",function($resource){
            var User = $resource('/user/:userId', {userId:'@id'});
                console.log(User);

            //请求一个资源,方法里边允许传入一组或两组数据对象
            //注意：如果是POST、PUT方法，两组数据对象的 第一组对象 被追加到url里边
            var user = User.get({userId:123}, function(msg) {
              console.log(msg);
            });
            //promise写法
            var user2 = User.get({userId:123}).$promise.then(function(){

            })
        }]);

        //工厂模式

    </script>
</html>

发现有一段代码特别有意思，值得挖掘一下下

var rs = $resource('/user').get(function(msg){

});

经研究发现，变量rs 是完全等于返回的结果 msg 的！官方文档也举了个栗子：
是这样子的

rs.abc = true;
rs.$save();

rs其实就是个对象结果集，可以用它灵活操作其他方法，并且可以对其自由赋值，在调用其他方法的时候这些对象将会当作参数继续请求使用。这~真TM任性，必须点赞！！！

官方文档水深了，英文没学好，看也看不懂，估计就只能到这里了~~~~