ANGULARJS Services (Service)
In Angularjs you can create your own service, or use the built-in service.
What is a service?
In Angularjs, a service is a function or object that can be used in your ANGULARJS application.
More than 30 services have been built in Angularjs.
There is a $location service that 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 of the current page: </ p>
<h3> {{myUrl}} </ h3>
</ div>
<p> This example uses the built-in $ location service to get the URL of the current page. </ p>
<script>
var app = angular.module ('myApp', []);
app.controller ('myCtrl', function ($ scope, $ location) {
$ scope.myUrl = $ location.absUrl ();
});
</ script>
</ body>
</ html>
Run Result:
URL of the current page:
Http://www.runoob.com/try/try.php?filename=try_ng_services
This instance uses the built-in $location service to get the URL of the current page.
Note: The $location service is passed into the controller as a parameter. If you want to use it, you need to define it in controller.
Why use a service?
$http is the most commonly used service in ANGULARJS applications. The service sends a request to the server that responds to data sent by the server.
Angularjs will always monitor applications and handle event changes, ANGULARJS using $location services is better than using Window.location objects.
$http Services
$http is the most commonly used service in ANGULARJS applications. The service sends a request to the server that responds to data sent by the server.
Instance
To request data from a server using the $http service:
<! 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> Welcome message: </ p>
<> {{myWelcome}} <>
</ div>
<p> The $ http service requests information from the server, and the returned value is placed in the variable "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>
Run Result:
Welcome information:
Welcome to visit
The $http service requests information from the server, and the returned value is placed in the variable "Mywelcome".
The above is a very simple $http service instance, more $http service Application Please check the Angularjs http tutorial.
$timeout Services
Angularjs $timeout Service corresponds to the JS window.settimeout function.
Instance
Display information after two seconds:
<! 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> Show message after two seconds: </ p>
<h1> {{myHeader}} </ h1>
</ div>
<p> $ timeout access executes the specified function after the specified number of milliseconds. </ 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 Result:
Display information after two seconds:
How are are you today?
$timeout Access executes the specified function after the prescribed number of milliseconds.
$interval Services
Angularjs $interval Service corresponds to the JS window.setinterval function.
Instance
Display information every two seconds:
<! 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> The time now is: </ p>
<h1> {{theTime}} </ h1>
</ div>
<p> $ interval access to call a function or evaluate an expression at a specified interval (in milliseconds). </ 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>
Operation Effect:
Now the time is:
3:41:09
$interval access calls to functions or meters in the specified period (in milliseconds)
Create a custom Service
You can create custom access and link to your module:
To create an access named Hexafy:
App.service (' Hexafy ', function () {
This.myfunc = function (x) {return
x.tostring ();
}
});
To use custom access, you need to add it separately when defining the filter:
Instance
Converts a number to a 16-hexafy number using a custom service:
<! 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 hex is: </ p>
<h1> {{hex}} </ h1>
</ div>
<p> Custom service for converting hexadecimal numbers: </ 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 Result:
255 of the 16 in the system is:
F F
Custom service for converting 16-in-number:
filters, using custom services
When you create a custom service and connect to your application, you can use it in a controller, instruction, filter, or other service.
Use the service Hexafy in the filter MyFormat:
<! 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">
Use services in filters:
<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>
Operation Effect:
To use a service in a filter:
F F
You can use a filter when you get a value in an array of objects:
Create service Hexafy:
<! 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> Use filter when getting array [255, 251, 200] values: </ p>
<ul>
<li ng-repeat = "x in counts"> {{x | myFormat}} </ li>
</ ul>
<p> The filter uses the service to convert decimal to hexadecimal. </ 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>
Operation Effect:
Use filters when getting the array [255, 251, 200] Value:
The filter uses the service to convert 10 to 16.
The above is the ANGULARJS service information collation, follow-up continue to supplement, there is a need for the reference of friends.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
