一、内建服务---对象
1. $location服务--返回当前页面URL的地址
$location.absUrl();----window.location.href
2.$timeout服务--对应了JS window.setTimeout函数
$timeout(参数1,参数2)
参数1---表示间隔时间到以后需要执行的动作,是一个函数
参数2---表示间隔时间
3.$interval服务--对应了JS window.setInterval 函数
$interval(参数1,参数2)
参数1---表示间隔时间到以后需要执行的动作,是一个函数
参数2---表示间隔时间
4.$http 是Angular应用中最常用的服务。服务器发送请求,接受服务器传送过来的数据
$http.get("url").success(function(resp){});
$http.post("url").then(function(resp){});
例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
//创建模块
var testmodule=angular.module('mytestModule',[]);
//创建控制器
testmodule.controller('mycontroller',function($scope,$location,$timeout,$http,$interval){
//创建方法
//测试$location服务
$scope.testlocation=function(){
//$location服务--返回当前页面的 URL 地址
//$location.absUrl();----window.location.href
var myurl=$location.absUrl();
alert(myurl)
}
//测试$timeout服务
$scope.testTimeout=function(){
//$timeout(参数1,参数2)
//参数1---表示间隔时间到以后需要执行的动作,是一个函数
//参数2---表示间隔时间
$timeout(function(){
$scope.info="hello,我在测试$timeout服务"
},3000);
}
//测试$interval服务
var time=null;
$scope.testinterval=function(){
//$interval(参数1,参数2)
//参数1---表示间隔时间到以后需要执行的动作,是一个函数
//参数2---表示间隔时间
time=$interval(function(){
var dataobj=new Date();
var y=dataobj.getFullYear();
var m=dataobj.getMonth();
var da=dataobj.getDate();
var h=dataobj.getHours();
var min=dataobj.getMinutes();
var s=dataobj.getSeconds();
var day=dataobj.getDay();
var time=y+"年"+m+"月"+da+"日"+h+":"+min+":"+s+" 星期:"+day;
$scope.tinmeinfo=time;
},1000)
}
//测试$http 是Angular应用中最常用的服务
$scope.testhttp=function(){
//$http.get("url").success(function(resp){});
//$http.post("url").then(function(resp){});
$http.get("http://localhost:8080/getStudent").then(function(resp){
$scope.list=resp.data;
})
}
})
</script>
</head>
<body ng-app="mytestModule" ng-controller="mycontroller">
<h4>AbgularJS 服务(service)</h4>
<h4>1.内建服务---对象</h4>
<h5>1.1 $location服务--返回当前页面URL的地址</h5>
<input type="button" value="测试$location服务" ng-click="testlocation()">
<h5>1.2 $timeout服务--对应了JS window.setTimeout函数</h5>
<input type="button" value="测试$timeout服务" ng-click="testTimeout()">
<p>{{info}}</p>
<h5>1.3 $interval服务--对应了JS window.setInterval 函数</h5>
<input type="button" value="测试$interval服务" ng-click="testinterval()">
<input type="button" value="停止" ng-click="timetop()">
<h6>{{tinmeinfo}}</h6>
<h5>1.4 $http 是Angular应用中最常用的服务。服务器发送请求,接受服务器传送过来的数据</h5>
<input type="button" value="测试$http服务" ng-click="testhttp();"><br>
<table border="1px" width="500px">
<tr ng-repeat="stu in list">
<td>{{stu.stuid}}</td>
<td>{{stu.stuname}}</td>
<td>{{stu.stuage}}</td>
<td>{{stu.stuaddress}}</td>
</tr>
</table>
<h4>2.自定义服务</h4>
<h5>创建自定义服务: 模块对象名称.service('服务名称',function(){ })</h5>
<h5>通常情况创建的自定义服务是用来方法http请求,所以自定义服务的function参数通常是$http</h5>
</body>
</html>
二、自定义服务
创建自定义服务: 模块对象名称.service('服务名称',function(){ })
通常情况创建的自定义服务是用来方法http请求,所以自定义服务的function参数通常是$http
例如:
前提是通过我之前做的studentinfo后台启动服务器
将模块,控制器、服务独立成js文件引入HTML网页中
loginmodule.js
var testmodule=angular.module('loginmodule',[]);
loginController.js
//创建控制器
testmodule.controller('loginContro',function($scope,loginService){
//定义保存用户名密码的变量
$scope.student={};
//定义登录方法
$scope.login=function(){
loginService.login($scope.student).success(function(resp){
if(resp.success){
window.open("success.html")
}
});
}
})
loginService.js
testmodule.service("loginService",function($http){
this.login=function(student){
alert(student.username)
return $http.get("http://localhost:8080/login?username="+student.username+"&password="+student.password);
}
})
test2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<!--导入模块的js文件-->
<script src="../JS/model/loginModule.js"></script>
<script src="../JS/Service/loginService.js"></script>
<script src="../JS/controller/loginContraller.js"></script>
</head>
<body ng-app="loginmodule" ng-controller="loginContro">
<table align="center" border="1px">
<tr align="center">
<td colspan="2"><h3>用户登录</h3></td>
</tr>
<tr align="center">
<td>用户名:</td>
<td><input type="text" ng-model="student.username"></td>
</tr>
<tr align="center">
<td>密码:</td>
<td><input type="password" ng-model="student.password"></td>
</tr>
<tr align="center">
<td colspan="2"><input type="button" value="登录" ng-click="login()"></td>
</tr>
</table>
</body>
</html>