6、angular的service
AngularJS 中你可以创建自己的服务，或使用内建服务。
什么是服务？
在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用。
AngularJS 内建了30 多个服务。
有个 $location 服务，它可以返回当前页面的 URL 地址。
为什么使用服务?
在很多服务中，比如 $location 服务，它可以使用 DOM 中存在的对象，类似 window.location 对象，但 window.location 对象在 AngularJS 应用中有一定的局限性。
AngularJS 会一直监控应用，处理事件变化， AngularJS 使用 $location 服务比使用 window.location 对象更好。
1、$location
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl as ctl">
{{aa}}
</div>
</body>
</html>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope,$location) {
$scope.aa = $location.absUrl()
});
</script>
2、$http
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl as ctl">
{{aa}}
</div>
</body>
</html>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope,$http) {
$scope.aa = $http.get('a.html').then(function(response){
$scope.aa = response.data
})
});
</script>
3、$timeout
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl as ctl">
{{aa}}
</div>
</body>
</html>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope,$timeout) {
$timeout(function(){
$scope.aa = '11111'
},2000)
});
</script>
4、$interval
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl as ctl">
{{aa}}
</div>
</body>
</html>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope,$interval) {
$interval(function(){
console.log(111)
},2000)
});
</script>
5、自定义service
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl as ctl">
{{aa}}
{{255 | myFormat}}
</div>
</body>
</html>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope,hexfy) {
$scope.aa = hexfy.myFun(255)
});
app.service('hexfy', function(){
this.myFun = function(x){
return x.toString(16)
}
})
app.filter('myFormat', ['hexfy', function(hexfy){
return function(x){
return hexfy.myFun(x);
}
}])
</script>
6、$apply
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl as ctl">
{{theTime}}
</div>
</body>
</html>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.theTime = new Date().toLocaleTimeString();
$scope.setTime = function(){
$scope.$apply(function(){
$scope.theTime = new Date().toLocaleTimeString();
})
}
setInterval($scope.setTime,1000)
});
</script>
7、$watch
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl as ctl">
<input type="text"ng-model="firstName">
<input type="text"ng-model="lastName">
<div>全名：{{firstName+""+lastName}}</div>
<div>{{fullName}}</div>
</div>
</body>
</html>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.lastName = "";
$scope.firstName = "";
$scope.$watch('firstName', function(){
$scope.fullName = $scope.firstName +''+$scope.lastName
})
$scope.$watch('lastName', function(){
$scope.fullName = $scope.firstName +''+$scope.lastName
})
});
</script>
8、$even $add
<table>
<tr style="{{$even?'#f1f1f1':''}}" ng-repeat="x in names">
<td>{{ $index + 1 }}</td>
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
9、$index
<table>
<tr ng-repeat="x in names">
<td style="{{$even?'#f1f1f1':''}}">{{$index + 1}}</td>
<td style="{{$even?'#f1f1f1':''}}">{{ x.Name }}</td>
<td style="{{$even?'#f1f1f1':''}}">{{ x.Country}}</td>
</tr>
</table>
