AngularJS1.0的使用总结笔记------004

最新推荐文章于 2020-02-03 22:19:20 发布

古语静水流深

最新推荐文章于 2020-02-03 22:19:20 发布

阅读量664

点赞数

文章标签： angularjs

本文链接：https://blog.csdn.net/zhanghuiqi205/article/details/60462826

版权

今天讲一下，angularjs的ngResource模块的使用，在使用之前首先需要引入这个文件

我的代码如下:HTML 部分

<!DOCTYPE html>
<html ng-app="myApp" lang="en">
<!--- ng-app ? html 浏览器如何知道这个html是angularjs的程序 ---->
<head>
    <meta charset="UTF-8">
    <title>Title</title>

   <!-- <script src="js/angular-route.min.js"></script>-->
    <script src="js/angular.min.js"></script>
    <script src="js/angular-resource.min.js" type="text/javascript" charset="utf-8"></script>

</head>
<body ng-controller="myController">  <!------  使用ng-controller指令 使用控制器 ------->
    <input type="button"  value="get请求数据" ng-click="doGet()">
    <input type="button" value="get 请求 config" ng-click="doGetConfig()">
    <input type="button" value="query 请求 config" ng-click="doQuery()">
    {{ result }}
</body>
</html>

JavaScript的代码：

<script>
    var app = angular.module('myApp', ['ngResource']); // 依赖ngSanitize 第三方的模块 组件
    app.controller('myController', ['$scope', '$http',  '$resource',   function ($scope, $http, $resource) {
        //get请求：get query 方法
        //post 请求： save方法
        $scope.doGet = function () {
        	console.log('======');    //用于检测代码是否执行到这来
            var url = 'http://localhost:8000/visit?name=Tom'
            var res = $resource(url);//构建好了resource对象
           // $scope.result = res.get();// 异步的方法
         //   console.log($scope.result.name); //undefine
            res.get(function (data) {
                $scope.result = data;
                console.log($scope.result.name)
            });
        }
        $scope.doGetConfig = function () {
                console.log(123);
            //:visit 变量 这里的param是个变量参数
            var url = 'http://localhost:8000/:param';
            var res = $resource(url,{
                param: 'visit',
                name: '@Tom', //这里把Tom @成一个变量
                age:40
            });
            $scope.result = res.get({Tom: 'cat'});
        }
        $scope.doQuery = function () {
        	console.log('456');
            var url = 'hello.json'
            var res = $resource(url);//构建好了resource对象
            //get只能请求一条数据
            //query请求多条数据
            res.query(function (data) {
                $scope.result = data;
            });
        }
    }]);
</script>

在JavaScript部分，我们首先声明

var app = angular.module('myApp', ['ngResource']);并注入ngResource模块。

然后我们就可以使用这个模块来进行数据交互了。

$resource服务本身是一个创建资源对象的工厂
var res=$resource('/api/users/:userId',{userId:'@id'});

可以把res对象理解成同RESTful的后端服务进行交互的接口。

res的请求方法有多种，包含：

{

　　“get”:{method:“get”},

　　“save”:{method:“post”}

　　“query”:{method:“get”,isArray:true}

　　“remove”:{method:“delete”}

　　“delete”:{method:“delete”}

}

各个方法的请求数据的类型和多少上面代码说的很清楚了。get请求通常被用来获取单个资源。query向指定URL发送一个GET请求，并期望返回一个JSON格式的资源对象集合。

query()和get()方法之间唯一的区别是AngularJS期望query()方法返回数组。当然我这里只是简单的给大家介绍一下angularjs的这个模块的使用，其他方法，可以参考更详细的API。下一节我们讲讲angularjs的指令，这个也是angularjs的一大特点。

古语静水流深

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS1.0的使用总结笔记------004

今天讲一下，angularjs的ngResource模块的使用，在使用之前首先需要引入这个文件我的代码如下:HTML 部分 Title --> {{ result }}JavaScript的代码： var app = angular.module('myApp', ['ngR
复制链接

扫一扫