AngularJS #11 - Services

✔ AngularJS Services

 > In AngularJS you can make your own service, or use one of the many built-in services

 

1. What is a Service?

 > In AngularJS, a service is a function, or object, that is available for, and limited to, your AngularJS application

 > AngularJS has about 30 built-in services. One of them is the $location service

 > The $location service has methods which return information about the location of the current web page

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $location) {
 $scope.myUrl = $location.absUrl();
});

: Note that the $location service is passed in to the controller as an argument. In order to use the service in the controller, it mush be defined as a dependency

 

 

2. Why use Services?

 > For may services, like the $location service, it seems like you could use objects that are already in the DOM, like the window.location object, and you could, but it would have some limitations, at least for you AngularJS application

 > AngularJS constantly supervises your application, and for it to handle changes and events properly, AngularJS prefers that you use the $location service instead of the window.location object

 

 

3. The $http Service

 > The $http service is one of the most common used services in AngularJS applications. The service makes a request to the server, and lets your application handle the response

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http){
 $http.get("welcome.htm").then(function(response){
  $scope.myWelcome = response.data;
 });
});

 

 

4. The $timeout Service

 > AngularJS version of the window.setTimeout function

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout){
 $scope.myHeader = "Hello World!";
 $timeout(function(){
  $scope.myHeader = "How are you today?";
 }, 2000);
});

 

 

5. The $interval Service

 > AngularJS version of the window.setInterval function

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
 $scope.theTime = new Date().toLoacleTimeString();
 $interval(function(){
  $scope.theTime = new Date().toLocaleTimeString();
 }, 1000);
});

 

 

6. Create Own Service

 > to create own service, connect it to the module

app.service('hexafy', function(){
 this.myFunc = function(x) {
  return x.toString(16);
 }
});

: service name is 'hexafy'

 

 > to use custom made service, add it as a dependency when defining the controller

app.controller('myCtrl', function($scope, hexafy) {
 $scope.hex = hexafy.myFunc(255);
});

 

 

7. Use a Custom Service Inside a Filter

 > Once you have created a service, and connected it to your application, you can use the service in any controller, directive, filter, or even inside other services

 > to use the service inside a filter, add it as a dependency when defining the filter

app.filter('myFormat', ['hexafy', function(hexafy) {
 return function(x){
  return hexafy.myFunc(x);
 };
}]);

<ul>
 <li ng-repeat="x in counts">{{x | myFormat}}</li>
</ul>