您的位置：首页 > Web前端 > AngularJS

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

2017-03-05 09:01 295 查看

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

我的代码如下:HTML 部分<!DOCTYPE html>
<html ng-app="myApp" lang="en">

<head>
<meta charset="UTF-8">
<title>Title</title>


<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"> 
<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的一大特点。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航