angular 模拟服务器获取数据

最新推荐文章于 2023-04-22 15:30:09 发布

bem_zj

最新推荐文章于 2023-04-22 15:30:09 发布

阅读量3k

点赞数 2

分类专栏：前端文章标签： angular 模拟服务器 angular-mocks ngMockE2E

本文链接：https://blog.csdn.net/bem_zj/article/details/72520533

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery.js" ></script>
<script type="text/javascript" src="js/angular.js" ></script>
<script type="text/javascript" src="js/angular-mocks.js" ></script>
<script type="text/javascript" src="js/index.js" ></script>
<script type="text/javascript" src="js/indexs.js" ></script>
</head>
<body>
<div ng-app="testDev" ng-controller="tc" >
<table border="1" width="100%">
<tr>
<th>id</th>
<th>用户名</th>
</tr>
//循环输出数据
<tr ng-repeat="user in users">
<td>{{user.id}}</td>
<td>{{user.name}}</td>
</tr>
</table>
</div>
</body>

</html>

//indexs.js文件
//testDev是模拟服务器模块名，要依赖实际项目的模块名，还有模拟服务器模块ngMockE2E
angular.module('testDev',['test','ngMockE2E'])
.run(function($httpBackend){
//run为了服务器运动的一个方法，$httpBackend为内置参数用于设置当用户请求某种数据时，模拟服务器返回某种数据
//
var users = [{
id:1,
name:'小红'
},{
id:2,
name:'小明',
},{
id:3,
name:'小黄',
}];
//当用户即实际开发模块请求路径/文件未'/test'时，返回users数据；
$httpBackend.whenGET('/test').respond(users);
//当用页面使用路由时，模拟服务器会屏蔽跳转文件,采用下面语句会让后轴为html的文件识别到。
//$httpBackend.whenGET(/html/).passThrough();
})

//index.js文件
//test为实际项目的模块名
angular.module('test',[])
.controller('tc',function($scope,$http){
var ctrl=this;//防止误用
ctrl.getUsers=function(){
$http.get('/test').then(function(respond){//用get的方法向模拟路径'/test'请求获取后台数据
//请求成功：respond.data返回后台的数据
$scope.users=respond.data;
},function(error){
//请求失败会执行该函数。
})
};
ctrl.getUsers();//调用该方法。
})

bem_zj

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
angular 模拟服务器获取数据

id用户名//循环输出数据{{user.id}}{{user.name}}//indexs.js文件//testDev是模拟服务器模块名，要依赖实际项目的模块名，还有模拟服务器模块ngMockE2Eangular.module('testDev',['test','ngMockE2E']).run(function($httpBacken
复制链接

扫一扫