AngularJS Services
AngularJS Services are singleton object that is
used to persist and share data between Controllers and perform specific
task. It is separate entity that is easily
maintainable and testable.
Angular Services follow SRP principle (Single Responsibility
Principle) and are bind together using dependency injection (DI).
SRP principle ensures that each object will have
only one responsibility.
AngularJS in-built Services
AngularJS provides many in-built services and
services start with a $ symbol.
Following are the most used services:
-$http
-$location
-$interval
-$timeout
-$filter
$http: - $http service is used for Ajax calls to get data
from server or post data to server.
The below example will demonstrate you to use $http
in AngularJS.
Example:
<script>
var myApp = angular.module('myApp', []);
myApp.controller('EmpController', function ($scope, $http) {
// the $http service is called to get
the data. you need to pass api url to get the data
$http.get("url/Employeelist")
.then(function(response) {
$scope.students =
response.data;
});
});
</script>
$interval:- $interval service is same as setInterval() method in JavaScript.
The specified function will execute on every
specified time interval by using this service.
The below example will demonstrate you to use
$interval in AngularJS.
Example:
<script>
var myApp = angular.module('myApp', []);
app.controller('EmpController', function ($scope, $interval) {
$scope.count = 0;
$scope.counter = function() {
$scope.count += 1;
};
$interval(function() {
$scope.counter();
}, 5000);
});
</script>
$location:- The $location service exposes the
current URL in the address bar. It use "window.location" in base and make URL available to our
application. Any Changes made to the URL are also reflected into $location.
Following are the URL object as a set
of methods
$location.url ():- this is RW (read/write) method. It read and
returns URL of address bar when you are called without parameter. AngularJS try
to change the address of browser when you pass the parameter.
The below example will demonstrate you to use $location.url
() in AngularJS.
<script>
var myApp = angular.module('myApp', []);
app.controller('EmpController', function ($scope, $location) {
$scope.currentURL = $location.url();
});
</script>
$location.absUrl(): - This method is use to get the full
url path with all segments. it is read
only method.
The below example will demonstrate you to use
$location.absUrl() in AngularJS.
<script>
var myApp = angular.module('myApp', []);
app.controller('EmpController', function ($scope, $location) {
$scope.AbsoluteURL = $location.absUrl();
});
</script>
$location.protocol(): - This method is used to get the protocol
(http, https) of current url. It is also read only method.
The below example will demonstrate you to use
$location.protocol() in AngularJS.
<script>
var myApp = angular.module('myApp', []);
app.controller('EmpController', function ($scope, $location) {
$scope.protocol = $location.protocol();
});
</script>
$location.port():
this method is used to get the port number in which application is running. It is read only method
this method is used to get the port number in which application is running. It is read only method
The below example will demonstrate you to use
$location.port() in AngularJS.
<script>
var myApp = angular.module('myApp', []);
app.controller('EmpController', function ($scope, $location) {
$scope.PortNumber = $location.port();
});
</script>
$location.path():- This is RW (read/write) method. It has
optional parameter. If you are calling without parameter, it returns current url
of address bar. It change path when you are calling this url as a parameter.
It should always start with forward slash (/)
The below example will demonstrate you to use
$location.path() in AngularJS.
<script>
var myApp = angular.module('myApp', []);
app.controller('EmpController', function ($scope, $location) {
$scope.path = $location.path();
});
</script>
$location.search():- This is RW (read/write) method. It has
optional parameter. When called without parameter, It will returns search part
of current URL as object. When call with parameter, It will change search part
with parameter and return $location object.
The below example will demonstrate you to use
$location.search() in AngularJS.
<script>
var myApp = angular.module('myApp', []);
app.controller('EmpController', function ($scope, $location) {
$scope.currentSearch = $location.search();
$scope.newValue = function () {
$location.search("name", "codeview");
$scope.changeSearchValue =
$location.search();
}
});
</script>
$location.hash(): - This is RW (read/write) method. It has
optional parameter.
When called without parameter, it returns hash part
of current url.
When call with parameter, It change hash part with
parameter and return $location object
The below example will demonstrate you to use
$location.hash() in AngularJS.
<script>
var myApp = angular.module('myApp', []);
app.controller('EmpController', function ($scope, $location) {
$scope.currentHash = $location.hash();
$scope.NewHashValue = function () {
$location.hash("codeviewHash");
$scope.changeHashValue =
$location.hash();
}
});
</script>
$location.host(): - this method is used to get the host
name with port number of current url. It is also read only method.
The below example will demonstrate you to use
$location.host() in AngularJS.
<script>
var myApp = angular.module('myApp', []);
app.controller('EmpController', function ($scope, $location) {
$scope.host = $location.host();
});
</script>
$filter:- AngularJS Filters is used to format the value for display to the end
users.
The below example will demonstrate you to use
$filter in AngularJS.
<script>
var myApp = angular.module('myApp', []);
app.controller('EmpController', function ($scope, $filter) {
$scope.WecomeMessage = "welcome to code-view.com !";
$scope.filteredMessage = $filter('uppercase')($scope.WecomeMessage);
});
</script>
$timeout: - AngularJS $timeout service is same as setTimeout() function in JavaScript.
You can set time delay to execute functions based
on your requirements.
Below example will demonstrate you to use $timeout
service in AngularJS.
<script>
var myApp = angular.module('myApp', []);
app.controller('EmpController', function ($scope, $filter) {
$timeout(function () {
$scope.WecomeMessage = "welcome to
code-view.com !";
}, 3000);
});
</script>
