angular的$resource使用小述

最新推荐文章于 2024-07-19 15:13:24 发布

dianqixiu0876

最新推荐文章于 2024-07-19 15:13:24 发布

阅读量114

点赞数

文章标签： javascript json 后端 ViewUI

原文链接：http://www.cnblogs.com/hejintao/p/6256787.html

版权

对于angular的$resource了解。

1.$resource服务依赖于$http。是用于ajax交互。

2.在使用时，需要引入src code<script src="js/vendor/angular-resource.js"> </script>，在module中要注入服务[‘ngResource’];

3.$resource有这些请求方法

{ 'get': {method:'GET'},

'save': {method:'POST'},

'query': {method:'GET', isArray:true},

'remove': {method:'DELETE'},

'delete': {method:'DELETE'}

};

4.$resource服务本身是一个创建资源对象的工厂，返回的$resource对象中包含了同后端服务器进行的交互的高层API.

5.在使用$resource的时候，我们可以将它封装成工厂进行调用。

6.如

var Demo = angular.module('Demo', ["ngResource"]);
Demo.factory('resource', function ($resource) {
    return $resource("data/:geekId.json", {}, {
        query: {
            method: "GET",
            params: {geekId: "dataList"},
            isArray: true
        },
       test: {
            method: "GET",
            params: {geekId: "ann"},
            isArray: true
        },
        save:{
            method: "POST",
            params: {geekId: "test"},
            isArray: true
        }
    });
});

7.可以将resource理解成和后端服务器进行交互的接口。里面的都是调用的方法。使用resource.test()的时候，用的是get的方法，使用resource.save()的时候，调用的是post方法。所以$resource可以说是封装的ajax方法。

8.在url的输入时，需注意，如果不写死的话。可以使用变量的方法来传值。比如你在data文件夹里有多个json文件，则可以用：DataUrl.json的书写方式来书写。在get里可以这样写，比如用test的方法resource.test({DataUrl:”test”})；那么解析后，变成data/test.json,get的地址就不会出错。

9.封装成工厂模式后，可以在controller中注入使用。

10.当在controller中使用时，我们可以当正常的ajax使用了。能用与正常的$scope变量保存。并且渲染在dom中。

源码：

<!DOCTYPE html>
<html ng-app="Demo">
  <head>
    <meta charset="utf-8">
    <title>test</title>
  </head>
  <body ng-controller="GeekListCtrl">

  <ul>
      <li ng-repeat="i in geeks">{{i.message}}</li>
  </ul>


    <script src='angular.js'></script>
    <script src="//cdn.bootcss.com/angular-resource/1.6.1/angular-resource.js" charset="utf-8"></script>
    <script>
        var Demo = angular.module('Demo', ["ngResource"]);
        Demo.factory('resource', function ($resource) {
            return $resource("data/:geekId.json", {}, {
                query: {
                    method: "GET",
                    params: {geekId: "dataList"},
                    isArray: true
                },
               test: {
                    method: "GET",
                    params: {geekId: "ann"},
                    isArray: true
                },
                save:{
                    method: "POST",
                    params: {geekId: "test"},
                    isArray: true
                }
            });
        });
        Demo.controller('GeekListCtrl', function ($scope, resource) {
            $scope.geeks = resource.test();
            console.log($scope.geeks);
            resource.save({},{"name":"tao"},function(a){
                console.log(a);
            })
            $scope.show = function () {
                resource.test({geekId:'test'},function(data){
                    console.log(data[0]);
                    $scope.user=data[0];

                });
            };
        })
    </script>
  </body>
</html>

(注：项目中的json文件为自己编写的json文档，为普通的数据格式)

转载于:https://www.cnblogs.com/hejintao/p/6256787.html

dianqixiu0876

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angular的$resource使用小述

对于angular的$resource了解。1.$resource服务依赖于$http。是用于ajax交互。2.在使用时，需要引入src code<script src="js/vendor/angular-resource.js"> </script>，在module中要注入服务[‘ngResource’];3.$resource有这些请求方法...
复制链接

扫一扫