AngularJS Service
In AngularJS you can create your own services or use built-in services.
What is service?
In AngularJS, a service is a function or object that can be used in your AngularJS application.
AngularJS has more than 30 built-in services.
There is a $location service, which can return the URL address of the current page.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p> 当前页面的url:</p>
<h3>{{myUrl}}</h3>
</div>
<p>该实例使用了内建的 $location 服务获取当前页面的 URL。</p>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $location) {
$scope.myUrl = $location.absUrl();
});
</script>
</body>
</html>Run Instance»
Click the "Run Instance" button to view the online instance
Note$location The service is passed to the controller as a parameter middle. If you want to use it, you need to define it in the controller.
Why use services?
$http is the most commonly used service in AngularJS applications. The service sends a request to the server, and the application responds to the data sent by the server.
AngularJS will always monitor the application and handle event changes. AngularJS uses the $location service better than the window.location object.
$http service
$http is the most commonly used service in AngularJS applications. The service sends a request to the server, and the application responds to the data sent by the server.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>欢迎信息:</p>
<h1>{{myWelcome}}</h1>
</div>
<p> $http 服务向服务器请求信息，返回的值放入变量 "myWelcome" 中。</p>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("welcome.htm").then(function (response) {
$scope.myWelcome = response.data;
});
});
</script>
</body>
</html>Run instance»
Click the "Run instance" button to view the online instance
The above is a very simple $http service example. For more $http service applications, please view AngularJS Http Tutorial.
$timeout service
AngularJS $timeout The service corresponds to the JS window.setTimeout function.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>两秒后显示信息:</p>
<h1>{{myHeader}}</h1>
</div>
<p>$timeout 访问在规定的毫秒数后执行指定函数。</p>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
$scope.myHeader = "Hello World!";
$timeout(function () {
$scope.myHeader = "How are you today?";
}, 2000);
});
</script>
</body>
</html>Run Instance»
Click the "Run Instance" button to view the online instance
$interval service
AngularJS $interval The service corresponds to the JS window.setInterval function.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>现在时间是:</p>
<h1>{{theTime}}</h1>
</div>
<p>$interval 访问在指定的周期(以毫秒计)来调用函数或计算表达式。</p>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
$scope.theTime = new Date().toLocaleTimeString();
$interval(function () {
$scope.theTime = new Date().toLocaleTimeString();
}, 1000);
});
</script>
</body>
</html>Run Instance»
Click the "Run Instance" button to view the online instance
Create a custom service
You can create a custom service to access and link it to your module:
Create a service named hexafy Access:
this.myFunc = function (x) {
return x.toString(16);
}
});
To use access custom services, you need Add independently when defining the filter:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>255 的16进制是:</p>
<h1>{{hex}}</h1>
</div>
<p>自定义服务，用于转换16进制数：</p>
<script>
var app = angular.module('myApp', []);
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
app.controller('myCtrl', function($scope, hexafy) {
$scope.hex = hexafy.myFunc(255);
});
</script>
</body>
</html>Run instance»
Click "Run" Instance" button to view online instances
Filter, use custom service
When you create a custom service and connect it to your application Afterwards, you can use it in controllers, directives, filters or other services.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp">
在过滤器中使用服务:
<h1>{{255 | myFormat}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
app.filter('myFormat',['hexafy', function(hexafy) {
return function(x) {
return hexafy.myFunc(x);
};
}]);
</script>
</body>
</html>Run Instance»
Click the "Run Instance" button to view the online instance
You can use filters when getting values in object arrays:
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>在获取数组 [255, 251, 200] 值时使用过滤器:</p>
<ul>
<li ng-repeat="x in counts">{{x | myFormat}}</li>
</ul>
<p>过滤器使用服务将10进制转换为16进制。</p>
</div>
<script>
var app = angular.module('myApp', []);
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
app.filter('myFormat',['hexafy', function(hexafy) {
return function(x) {
return hexafy.myFunc(x);
};
}]);
app.controller('myCtrl', function($scope) {
$scope.counts = [255, 251, 200];
});
</script>
</body>
</html>Run Example »
Click the "Run Instance" button to view the online instance
