$location可以放回当前页面的url地址；$localtion比使用window.location要好，因为angularjs会一直监控app，同时处理事件的变化！
举例：
<!DOCTYPE html>
<html>
<head>
<title>$location</title>
<meta charset="utf-8" />
<script src="angular/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>当前页面的url：</p>
{{myUrl}}
</div>
<script>
var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope,$location){
$scope.myUrl = $location.absUrl();
});
</script>
</body>
</html>
浏览器运行之后的效果：
当前页面的url：
file:///E:/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E4%BD%93%E7%B3%BB/bootstrap/angularStudy/demo15.html
$http是angularjs中使用最多的服务。angularjs中的服务用于向服务器发送请求，应用响应服务器传送过来的数据。
举例
<!DOCTYPE html>
<html>
<head>
<title>$http</title>
<meta charset="utf-8" />
<script src="angular/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>{{myWelcome}}</p>
</div>
<script>
var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope,$http){
$http.get("demo01.html").then(function(response){
$scope.myWelcome = response.data;
});
});
</script>
</body>
</html>
浏览器上的结果：
<!DOCTYPE html><html><head><title>angularJs</title><meta charset="utf-8" /><script src="angular/angular.min.js"></script></head><body>/*ng-app定义了一个应用。该应用是angular的所有者ng-model把元素的值绑定到应用。ng-bind把应用的数据绑定到HTML试图。ng-controller 定义该元素的控制器*/<div ng-app="myApp" ng-controller="myCtrl">name1:<input type="text" ng-model="firstname"></input><br/>name2:<input type="text" ng-model="lastname"></input><br/>姓名：{{firstname + " "+lastname}}</div><script>//定义angular应用var app = angular.module('myApp',[]);//控制器用于控制angular应用app.controller('myCtrl',function($scope){$scope.firstname="qqq";$scope.lastname = "www";});</script></body></html>
$timeout服务对应了window.setTimeout()函数
举例
<!DOCTYPE html>
<html>
<head>
<title>$timeout</title>
<meta charset="utf-8" />
<script src="angular/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>{{myHeader}}</p>
</div>
<script>
angular.module('myApp',[]).controller('myCtrl',function($scope,$timeout){
$scope.myHeader = "hello world";
$timeout(function(){
$scope.myHeader = "world hello";
},3000)
})
</script>
</body>
</html>
输出的结果：
hello world 三秒钟之后变成 world hello
$interval服务对应window.setInterval函数。在指定的周期来调用函数。
举例
<!DOCTYPE html>
<html>
<head>
<title>$interval</title>
<meta charset="utf-8" />
<script src="angular/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>time:{{myTime}}</p>
</div>
<script >
angular.module('myApp',[]).controller('myCtrl',function($scope,$interval){
$scope.myTime = new Date().toLocaleTimeString();
$interval(function(){
$scope.myTime = new Date().toLocaleTimeString();
},2000);
})
</script>
</body>
</html>
在浏览器上运行之后的效果是
time:下午4：21：08 两秒钟之后再显示的时间是4：21：10 以两秒钟为周期不停的调用$interval中的函数。
自定义service
举例：
<!DOCTYPE html>
<html>
<head>
<title>自定义service</title>
<meta charset="utf-8" />
<script src="angular/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>255转换成16进制的值：{{hex}}</p>
</div>
<script>
var app = angular.module('myApp',[]);
app.service('qwer',function(){
this.myFunction = function(x){
return x.toString(16);
}
});
app.controller('myCtrl',function($scope,qwer){
$scope.hex = qwer.myFunction(255);
});
</script>
</body>
</html>
浏览器运行之后的结果为：
255转换成16进制的值：ff
<!DOCTYPE html>
<html>
<head>
<title>过滤器中使用service</title>
<meta charset="utf-8" />
<script src="angular/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp">
<p>{{255 | myFormat}}</p>
</div>
<script>
var app = angular.module('myApp',[]);
app.service('qwer',function(){
this.myFunction = function(x){
return x.toString(16);
}
});
app.filter('myFormat',['qwer',function(qwer){
return function(x){
return qwer.myFunction(x);
}
}]);
</script>
</body>
</html>
浏览器运行之后的结果为：ff
service过滤数组
举例
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>对数组进行过滤</p>
<ul>
<li ng-repeat=" x in counts">{{x | myFormat}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp',[]);
app.service('qwer',function(){
this.myFunction = function(x){
return x.toString(16);
}
});
app.filter('myFormat',['qwer',function(qwer){
return function(x){
return qwer.myFunction(x);
}
}]);
app.controller('myCtrl',function($scope){
$scope.counts = [255,251,456];
})
</script>
</body>
</html>
输出的结果为
对数组进行过滤
- ff
- fb
- 1c8
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
