AngularJS Service (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 that can return the URL address of the current page.
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> The current page url:</p><h3>{{myUrl}}</h3></div><p>This instance 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>Running results:
The 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 as a parameter into the controller. If you want to use it, you need to define it in the controller.
Why use the 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 transmitted by the server.
AngularJS will always monitor applications and handle event changes. AngularJS uses the $location service better than using 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 transmitted by the server.
Example
Use the $http service to request data from the server:
<!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:</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>Running results:
Welcome message:
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. For more $http service applications, please check the AngularJS Http tutorial.
$timeout service
The AngularJS $timeout service corresponds to the JS window.setTimeout function.
Example
The information will be displayed in 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 information is displayed 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>Running results:
The information will be displayed in two seconds:
How are you today?
$timeout Access executes the specified function after the specified number of milliseconds.
$interval service
The AngularJS $interval service corresponds to the JS window.setInterval function.
Example
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 current time is:</p><h1>{{theTime}}</h1></div><p>$interval Access calls a function or calculates an expression in a specified period (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>Running effect:
Now the time is:
3:41:09 pm
$interval access calls a function or count in a specified period (in milliseconds)
Create a custom service
You can create custom accesses that link to your module:
Create an access named hexafy:
app.service('hexafy', function() { this.myFunc = function (x) { return x.toString(16); }});To use custom access, you need to add it independently when defining the filter:
Example
Use custom service hexafy to convert a number into a 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>255's hexagram is:</p><h1>{{hex}}</h1></div><p>Custom service, used to convert hexagram 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>Running results:
The hexadecimal system of 255 is:
ff
Custom service for converting hexadecimal numbers:
In the filter, use custom services
When you create a custom service and connect to your app, you can use it in controllers, directives, filters, or other services.
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>Running effect:
Use services in filters:
ff
When getting values in an array of objects you can use filters:
Create a 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 filters when getting array [255, 251, 200] values:</p><ul> <li ng-repeat="x in counts">{{x | myFormat}}</li></ul><p>Filter uses a 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>Running effect:
Use filters when getting array [255, 251, 200] values:
Filters use services to convert decimal to hexadecimal.
The above is a compilation of the information on AngularJS service. We will continue to add it later. For friends in need, please refer to it.