Service of AngularJS Getting Started of Service
- 2021-07-06 09:52:45
- OfStack
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 returns the URL address of the current page.
Instances
<!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> Of the current page url:</p>
<h3>{{myUrl}}</h3>
</div>
<p> This example uses the built-in $location Service gets the URL . </p>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $location) {
$scope.myUrl = $location.absUrl();
});
</script>
</body>
</html>
Run results:
url for 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 controller as a 1 parameter. If you want to use it, you need to define it in 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 transmitted by the server.
AngularJS monitors the application directly and handles 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 transmitted by the server.
Instances
Request data from the 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> $http The service requests information from the server, and the returned value is put into a variable "myWelcome" Medium. </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 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 example of $http service. For more applications of $http service, please see AngularJS Http tutorial.
$timeout service
The AngularJS $timeout service corresponds to the JS window. setTimeout function.
Instances
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> Display information in 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 results:
Display information after two seconds:
How are you today?
The $timeout access executes the specified function after a specified number of milliseconds.
$interval service
The AngularJS $interval service corresponds to the JS window. setInterval function.
Instances
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> Now the time is :</p>
<h1>{{theTime}}</h1>
</div>
<p>$interval Access in the specified period ( In milliseconds ) To call a function or evaluate an expression. </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 meter at a specified period (in milliseconds)
Create a custom service
You can create custom access and 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:
Instances
Convert a number to hexadecimal using the custom 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>255 Adj. 16 The binary system is :</p>
<h1>{{hex}}</h1>
</div>
<p> Custom service for transforming 16 Binary number: </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 results:
The hexadecimal of 255 is:
f f
Custom service for converting hexadecimal numbers:
Filter, use custom services
Once you have created a custom service and connected to your application, you can use it in controllers, commands, filters, or other services.
Using service hexafy in 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">
Using 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:
Using services in filters:
f f
You can use filters when getting values in an object array:
Create the 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> Getting an array [255, 251, 200] Use filters when using values :</p>
<ul>
<li ng-repeat="x in counts">{{x | myFormat}}</li>
</ul>
<p> The filter uses the service to set the 10 Binary conversion to 16 Binary system. </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 filter when getting array [255,251,200] values:
ff fb c8Filters use services to convert decimal to hexadecimal.
The above is the AngularJS service data collation, follow-up to continue to supplement, friends in need of reference.