In Angularjs, a service is a function or object that can be used in our ANGULARJS applications. More than 30 services have been built in Angularjs. This blog will show you how to use some services and how to create our own services.
The API for the ANGULARJS service can be viewed here $http
$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. Can be understood as Ajax in jquery.
First we create a JSON data file for $http access.
[1,2,3,4,5,6,7,8,9]
Next we use $http to read the data:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/angular.min.js"></script>
<script type="text/javascript">
angular.module("myApp", []).controller("myCtrl", function($scope, $http) {
$http.get("data.json").success(function(data) {
$scope.items = data;
});
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in items">{{x}}</li>
</ul>
</body>
</html>
$interval
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/angular.min.js"></script>
<script type="text/javascript">
angular.module("myApp", []).controller("myCtrl", function($scope, $http) {
$http.get("data.json").success(function(data) {
$scope.items = data;
});
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in items">{{x}}</li>
</ul>
</body>
</html>
This achieves a clock effect, the operation effect:
$location
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/angular.min.js"></script>
<script type="text/javascript">
angular.module("myApp", []).controller("myCtrl", function($scope, $location) {
$scope.items = [];
$scope.items.push("absUrl:" + $location.absUrl());
$scope.items.push("protocol:" + $location.protocol());
$scope.items.push("host:" + $location.host());
$scope.items.push("port:" + $location.port());
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="item in items">{{item}}</li>
</ul>
</body>
</html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/angular.min.js"></script> <script type="text/javascript"> angular.module("myApp", []).controller("myCtrl", function($scope, $location) { $scope.params = $location.search(); }); </script> </head> <body ng-app="myApp" ng-controller="myCtrl"> <div>{{params}}</div> </body> </html>
After our visit, we will find that the page shows: {}, no data has been taken, this is angularjs bug, not like this, in the $location API provides such an example
Given URL http://example.com/#/some/path?foo=bar&baz=xoxo
var searchobject = $location. Search ();
=> {foo: ' Bar ', Baz: ' XOXO '}
Set Foo to ' Yipee '
Location.search (' foo′, ' yipee′);//Location.search (' foo ', ' Yipee '); Location.search () => {foo: ' Yipee ', Baz: ' XOXO '}
We modeled our address in the example of the API and changed it to the following form:
http://127.0.0.1:8020/mui/location.html#?p1=123&p2=456
At this point we will find that the page shows what we are predicting. In fact, in the case of no modification of the request address, we can also get the query parameters, our code should write this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--The base element must be added, otherwise an error is reported -->
<base href="/" />
<script src="js/angular.min.js"></script>
<script type="text/javascript">
angular.module("myApp", []).
config(function($locationProvider) {
$locationProvider.html5Mode(true);
}).controller("myCtrl", function($scope, $location) {
$scope.params = $location.search();
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<div>{{params}}</div>
</body>
</html>
Custom Services
It describes some of the services built into the ANGULARJS, and here's how to customize your own services, and a friend of the previous "Angularjs filter" should be able to guess how the custom service works, and the custom filter looks like it. Let's show you how to customize the service by using the code below.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/angular.min.js"></script>
<script type="text/javascript">
angular.module("myApp", [])
.service('HQString', function() {
this.toUpperCase = function(x) {
return x.toUpperCase();
}
}).controller("myCtrl", function($scope, HQString) {
$scope.name = HQString.toUpperCase('jianggujin');
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<div>{{name}}</div>
</body>
</html>
In this code, we customize a service and add a method to convert the string to uppercase and run
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
