AngularJS – Services

Pritty October 31, 2018 Angular Js, Web Development Leave a comment 386 Views

The service will helps to fetch data from the database when to share the data between controllers.
If we store the data inside a controller, once we change to another controller the data will be discarded.
AngularJS has 30 built in services.

Types of Services in AngularJS

Built-in Services: The angularjs has inbuilt services. That’s is core services.
The built in services like $http, $log, $location etc..
The inbuilt services are always prefixed with $.
Custom Services: These services are developed by developers to achieve certain business logic in the form of service.

The $http Service

The $http is the one of the inbult services in angularjs. It is commonly used services in angularjs application.

Example

Use the $http service to request data from the server:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl"> 
<p>Today's welcome message is:</p>
<h1>{{myWelcome}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  $http.get("welcome.htm").then(function (response) {
      $scope.myWelcome = response.data;
  });
});
</script>
</body>
</html>

<!DOCTYPE html>

<html>

<body>

<p>Today's welcome message is:</p>

<h1>{{myWelcome}}</h1>

</div>

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope, $http) {

$http.get("welcome.htm").then(function (response) {

$scope.myWelcome = response.data;

});

</script>

</body>

</html>

From the above code we can clearly say that: The $http service requests a page on the server, and the response is set as the value of the “myWelcome” variable.

The $location Service

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