Angular 服务的简单使用
2024-10-15 20:28:34
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Service</title>
</head>
<body ng-app="app" ng-controller="myCtrl"> <input type="text" ng-model="cont" >
<hr>
<button ng-click="get()">Get</button> <ul ng-show="user">
<li>{{user.id}}</li>
<li>{{user.name}}</li>
<li>{{user.age}}</li>
</ul> <script src="bower_components/angular/angular.js"></script> <script> var app = angular.module("app",[]); // app.controller("myCtrl",["$scope","$http",function ($scope,$http) {
// $scope.get=function () {
// $http({
// method:'GET',
// url:'data.json'
// }).then(function suc(response) {
// $scope.user=response.data;
// console.log(response);
// });
// }
// }]) // app.controller("myCtrl",["$scope","$timeout","$http",function ($scope,$timeout,$http) {
// var timer;
// $scope.$watch("cont",function (newCont) {
// if(newCont) {
// if(timer){
// $timeout.cancel(timer);//延时500毫秒后请求数据,避免频繁的请求
// }
// timer = $timeout(function () {
// $http({
// method: 'GET',
// url: 'data.json'
// }).then(function suc(response) {
// $scope.user = response.data;
// console.log(response);
// });
// },500);//延时500毫秒后请求数据,避免频繁的请求
//
// }
// })
// }]) //自定义服务
app.factory("GetService",["$http",function ($http) {
return {
doget:function (url) {
return $http({
method: 'GET',
url: url
});
}
}
}]);
//自定义服务,放在最后一个参数中
app.controller("myCtrl",["$scope","$timeout","$http","GetService",function ($scope,$timeout,$http,GetService) {
var timer;
$scope.$watch("cont",function (newCont) {
if(newCont) {
if(timer){
$timeout.cancel(timer);//延时500毫秒后请求数据,避免频繁的请求
}
timer = $timeout(function () {
//使用自定义服务
GetService.doget('data.json').then(function suc(response) {
$scope.user = response.data;
console.log(response);
});
},500);//延时500毫秒后请求数据,避免频繁的请求
}
})
}]) </script> </body>
</html>
最新文章
- 重写AgileEAS.NET SOA 中间件平台账号密码的加密算法
- [教程] 【玩转终端1:apt-get】
- 【iCore3 双核心板_FPGA】实验二十五:NIOS II之UART串口通信实验
- EF-Linq将查询结果转换为List<;string>;
- HDU 5919 Sequence II(主席树+逆序思想)
- [转](二)unity4.6Ugui中文教程文档-------概要-UGUI Canvas
- hdu 4763 &;&; 2013 ACM/ICPC 长春网络赛解题报告
- Nginx配置文件nginx.conf详细说明
- spring Stack Overflow
- time_wait和clost_wait说明
- C++ Builder多线程编程技术经验谈(转)
- 简单使用sp_executesql 参数化
- python request 和requests 的区别
- localhost无法访问的问题
- Python多进程池 multiprocessing Pool
- 在docker hub,用github的dockerfile自动生成docker镜像
- 电信网关-天翼网关-GPON-HS8145C设置桥接路由拨号认证
- IDEA 添加jar包的三种方式(重点:new uer Libraries)
- Linux 文件的读写执行权限的说明
- arpa/inet.h所引起的Segmentation fault及网络编程常见的头文件