Service 是一个函数或者对象,可以理解为一种服务,由系统先创建或者用户自定义以后,再将其引入来使用
使用方式
依赖注入
系统内置主要服务
1.$location
2.$http
3.$timeout
4.$interval
使用方式
下面是使用系统内置服务$location的例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJs Service</title>
<link rel="stylesheet" href="../lib/bootstrap.min.css">
<script src="../lib/angular.min.js"></script>
<script src="../lib/angular-ui-router.js"></script>
</head>
<body>
<!--AngularJs Service-->
<!--
1.概念
作为一种分层思想,类似于后端的服务层,有一些内置的服务,需要通过依赖注入使用
2.使用方法
依赖注入
3.自定义方法
-->
<div ng-app="myApp" ng-controller="myCtrl">
url:<span ng-bind="url"></span>
</div>
<script>
var app = angular.module('myApp',[])
app.controller('myCtrl',['$scope','$location',function ($scope,$location) {
$scope.url = $location.absUrl()
}])
</script>
</body>
</html>
使用$timeout例子
<div ng-app="myApp" ng-controller="myCtrl">
name:<span ng-bind="name"></span>
</div>
<script>
var app = angular.module('myApp',[])
app.controller('myCtrl',['$scope','$timeout',function ($scope,$timeout) {
$scope.name = "希特勒";
//两秒后将name替换为斯大林
$timeout(function () {
$scope.name = "斯大林";
},2000)
}])
</script>
$interval 使用例子
<div ng-app="myApp">
<div ng-controller="myCtrl1">
name:<span ng-bind="name"></span>
</div>
<div ng-controller="myCtrl2">
time:<span ng-bind="time"></span>
</div>
</div>
<script>
var app = angular.module('myApp',[]);
app.controller('myCtrl1',['$scope','$timeout',function ($scope,$timeout) {
$scope.name = "希特勒";
//两秒后将name替换为斯大林
$timeout(function () {
$scope.name = "斯大林";
},2000)
}]);
app.controller('myCtrl2',['$scope','$interval',function ($scope, $interval) {
$scope.time = new Date().toLocaleTimeString()
//每隔1秒更新time
$interval(function () {
$scope.time = new Date().toLocaleTimeString();
},1000);
}])
</script>