服务:一个函数或对象,可使用其中自带的服务,也可创建服务。
<!-- 通用部分 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
......
<script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
......
</body>
</html>
1、$location 返回当前页面URL地址(作为参数传递到controller中)
<div ng-app="xxApp" ng-controller="xxCtrl">
<p>当前页面URL:</p>
<p>{{myUrl}}</p>
</div>
<script>
var app = angular.module('xxApp', []);
app.controller('xxCtrl', function($scope, $location) {
$scope.myUrl = $location.absUrl();
});
</script>
2、$http 服务向服务器发送请求,应用响应服务器传送的数据。
<div ng-app="xxApp" ng-controller="xxCtrl">
<h1>{{date}}</h1>
</div>
<script>
var app = angular.module('xxApp', []);
app.controller('xxCtrl', function($scope, $http) {
$http.get("/xxdemo.html").then(function (response) {
$scope.date = response.data;
});
});
</script>
xxdemo.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>The TV play "Secret and Great" is coming out</h1>
</body>
</html>
链接到: AngularJS——5、Http
3、$timeout 在规定的毫秒数后执行指定函数。
<div ng-app="xxApp" ng-controller="xxCtrl">
<p>2s后显示信息:</p>
<p>{{info}}</p>
</div>
<script>
var app = angular.module('xxApp', []);
app.controller('xxCtrl', function($scope, $timeout) {
$scope.info = " what? ";
$timeout(function () {
$scope.info = "Secretly and Greatly is coming out!";
}, 2000);
});
</script>
4、$interval 在指定的周期(以毫秒计)来调用函数或计算表达式。
<div ng-app="xxApp" ng-controller="xxCtrl">
<p>当前时间:</p>
<h1>{{time}}</h1>
</div>
<script>
var app = angular.module('xxApp', []);
app.controller('xxCtrl', function($scope, $interval) {
$scope.time = new Date().toLocaleTimeString();
$interval(function () {
$scope.time = new Date().toLocaleTimeString();
}, 10000);
});
</script>
输出:每10s执行一次
5、(1)创建自定义服务
<div ng-app="xxApp" ng-controller="xxCtrl">
<p> 504 的二进制是:{{bin}}</p>
</div>
<script>
var app = angular.module('xxApp', []);
app.service('isbin', function() {
this.myFunc = function (x) {
return x.toString(2);
}
});
app.controller('xxCtrl', function($scope, isbin) {
$scope.bin = isbin.myFunc(504);
});
</script>
输出:
(2)(过滤器中)使用自定义服务
<div ng-app="xxApp" ng-controller="xxCtrl">
<p> 1987 的二进制是:{{1987 | format}}</p>
<ul>
<li ng-repeat="x in data">{{ x | format}}</li>
</ul>
</div>
<script>
var app = angular.module('xxApp', []);
app.service('isbin', function() {
this.myFunc = function (x) {
return x.toString(2);
}
});
//过滤器使用服务将10进制转换为2进制。
app.filter('format',['isbin',function(isbin){
return function(x){
return isbin.myFunc(x);
}
}]);
app.controller('xxCtrl', function($scope, isbin) {
$scope.data = [1987,5,4];
});
</script>
输出: