In hour 1 of this series we learned how to get started with AngularJS.
In hour 2 of this series we learned about the AngularJS Template.
In hour 3 of this series we learned two ways to do bindings and filterings.
In this hour we will learn about:
- Using Services in Angular
- Calling remote service to load data
If you are following this hour series on AngularJS, you might have noticed that we are using local data for authors. Using Services in AngularJS, you can call a remote service. Here we will call a HTTP based (REST Service) service. You can use $http of AngularJS to call a remote service or to make a HTTP request.
![http of AngularJS]()
So in the controller we need to modify to make a call to the service. In the following example the service is returning JSON.
![returning JSON]()
Let us see what is happening in the code above:
- The $http service is making HTTP GET operation
- The Service is returning JSON data
- The $http service returns the promised object having the success method. In this method service the response will be handled asynchronously.
- In the success method of the promise object of the $http service, Angular is assigning returned data to the current scope and creating a model named author
- The Parsing of returned data is done by angular.
As you might have noticed that to use a service we need to pass the service as a dependency in the constructor of the Controller.
![constructor of Controller]()
The Dependency Injector of Angular provided services to the controller. It works in the following three steps:
- The Injector identifies $http as a dependency of the controller
- The Injector checks whether an instance of $http exists or not; if not then it creates a new instance of $http
- The Injector passes a singleton instance to the controller of the service. In this case the Angular dependency injector will check whether or not the $http service singleton instance is passed to the AuthorController.
![Dependency Injector]()
So for your reference, the code from the above discussion is given below. Module and Controller is created as given below:
- var AuthorApp = angular.module('AuthorApp', []);
-
- AuthorApp.controller('AuthorController',
- function ($scope, $http)
- {
-
- $http.get('http://localhost:21800/Service1.svc/GetAuthors')
- .success(function (data)
- {
- $scope.authors = data;
- });
-
- });
And the View is as below:
- <!DOCTYPE html>
- <html ng-app="AuthorApp">
- <head>
- <title>Angular Demo</title>
- <script src="Scripts/angular.min.js"></script>
- <script src="Author.js"></script>
- </head>
- <body ng-controller="AuthorController">
-
- Search: <input ng-model="searchtext">
-
- Sort:
- <select ng-model="sortorder">
- <option value="AuthorName">Name</option>
- <option value="age">Age</option>
- </select>
-
- <ul>
- <li ng-repeat="author in authors |
- filter:searchtext |
- orderBy:sortorder">
- {{author.AuthorName}}
-
- </li>
- </ul>
- </body>
- </html>
On the web page all the authors will be rendered as below:
![]()
We learned how easy it is using the Angular service to make a HTTP request. We also learned about using an Angular service like $http in applications. Happy coding.