$resource

最新推荐文章于 2022-02-26 18:43:56 发布

tyust512

最新推荐文章于 2022-02-26 18:43:56 发布

阅读量373

点赞数

分类专栏： AngularJS

AngularJS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

1用前准备

在页面加载 angular-resource.js

2 核心价值

提供给开发者, 与RESTful 风格的webService交互的更好用户体验, 它封装了较为低级的$http, 这样就不需要写大量的请求代码了.

//请求地址, 请求参数, 动作
$resource(url[, parameters][, actions]);

请求参数: 对象类型, 如{author: “lilei”, age: “20”}, 最终这些参数会被作为键值对添加到url的后面变成 ?author=lilei & age=20

动作: 对象类型,

返回值: 对象类型, 包含所有的互动方法, 这些会调用 “$http”服务

实例:

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

注意: @id 和 $save() , 使用@后, 当执行$save时, user.id会作为userId的值来发送请求.

这种方式封装Ajax，不仅仅使得代码更加优雅，而且还能配合ng的视图渲染：当数据没有返回之前，模板引擎不会渲染，一旦异步数据获取完成，会自动触发模板引擎的渲染机制把数据呈现到视图中。

完整的例子:

<!DOCTYPE html>  
<html ng-app="Demo">  
<head>  
<meta charset=utf-8 />  
<title>ngResource DEMO</title>  
</head>  
<body>  
    <div ng-controller="GeekListCtrl">  
        <ul>  
            <li ng-repeat="geek in geeks">  
                <a href="#" ng-click="show({{geek.id}})">{{geek.name}}</a>  
            </li>  
        </ul>  
        <div ng-show="user">  
            {{user.msg}}  
        </div>  
    </div>  

    <script src="./src/angular.js"></script>  
    <script src="./src/angular-resource.js"></script>  
    <script type="text/javascript">  
        var Demo = angular.module('Demo', ["ngResource"])  
                    .factory('Geek', function ($resource){  
                        return $resource("geek/:geekId.json", {}, {  
                            query: {  
                                method: "GET",  
                                params: {geekId: "list"},  
                                isArray: true  
                            }  
                        });  
                    });  

        function GeekListCtrl($scope, Geek){  
            $scope.geeks = Geek.query();  
            $scope.show = function(id){  
                $scope.user = Geek.get({geekId: id});  
            };  
        }  

        function GeekDetailCtrl($scope, $routeParams, Geek){  
            $scope.geek = Geek.get({geekId: $routeParams.geekId}, function(geek){  
                console.dir(geek);  
            });  
        }  
    </script>  
</body>  
</html>