Post
Ask Question

Introduction To AngularJS – Day Seventeen

In this 17th day of AngularJS article series, we are going to be learning the next key players/concept of AngularJS, understanding the concept of Built in Services of AngularJS. Before moving to key players/concepts of AngularJS, please read my previous articles:

  1. Introduction to AngularJS – Day 1
  2. Introduction to AngularJS – Day 2
  3. Introduction to AngularJS – Day 3
  4. Introduction to AngularJS – Day 4
  5. Introduction to AngularJS – Day 5
  6. Introduction to AngularJS – Day 6
  7. Introduction to AngularJS – Day 7
  8. Introduction to AngularJS – Day 8
  9. Introduction to AngularJS – Day 9
  10. Introduction to AngularJS – Day 10
  11. Introduction to AngularJS – Day 11
  12. Introduction to AngularJS – Day 12
  13. Introduction to AngularJS – Day 13
  14. Introduction To AngularJS – Day 14
  15. Introduction To AngularJS – Day 15
  16. Introduction To AngularJS – Day 16

AngularJS provides many built in services. For example:
services
The $http is used to make an Ajax call to get the server data, the $route is used to define the routing information, and so on. The built-in services are always prefixed with ‘$’ symbol.

$location Service

The name defines the functionality of $location service. It does the same function as ‘window.location’. It parses the URL browser address bar and makes used of this in your application. It contains the set and get property. Mostly this ‘$location’ service is used in AngularJS routing to get current path and do action on that path like ‘$routeProvider’. In this ‘$routeProvider’, we used to match the current path and call particular view and controller. It contains URL object, set of the following methods:

  1. Protocol – get current URL protocol.
  2. Host – get current host name.
  3. Port – get current port number.
  4. Path – get current path.
  5. Search – get current search keywords.
  6. Hash – get hash fragment when called without any parameters.

Example:

Now, we are going to learn how to use ‘$location’ service by example and how to use set of methods.

app.js

  1. /// <reference path="angular.min.js" />  
  2. var app = angular.module("myApp", []);  
  3.   
  4. //Creating controller & injecteing $location in controller  
  5. app.controller("myController", function ($scope, $location) {  
  6.       
  7.     //using $location service  
  8.   
  9.     $scope._display = false;  
  10.   
  11.     $scope.getData = function () {  
  12.          
  13.         $scope.absUrl = $location.absUrl();  
  14.         $scope.proto = $location.protocol();  
  15.         $scope.host = $location.host();  
  16.         $scope.port = $location.port();  
  17.         $scope.search = $location.search();  
  18.         $scope.hash = $location.hash();  
  19.         $scope._display = true;  
  20.     };  
  21.       
  22. });  
Index.html
  1. <!DOCTYPE html>  
  2. <html ng-app="myApp">  
  3. <head>  
  4.     <title>C# Corner</title>  
  5.     <meta charset="utf-8" />  
  6.     <script src="app/angular.min.js"></script>  
  7.     <script src="app/app.js"></script>  
  8. </head>  
  9. <body ng-controller="myController">  
  10.     <h2>AngularJS $location Services</h2>  
  11.     <input type="button" ng-click="getData()" value="Get Data" /><br />  
  12.     <h3 ng-show="_display">Absolute URL is : {{absUrl}}</h3>  
  13.     <h3 ng-show="_display">Protocol is : {{proto}}</h3>  
  14.     <h3 ng-show="_display">Host is : {{host}}</h3>  
  15.     <h3 ng-show="_display">Port is : {{port}}</h3>  
  16.     <h3 ng-show="_display">Serach is : {{search}}</h3>  
  17.     <h3 ng-show="_display">Hash is : {{hash}}</h3>  
  18. </body>  
  19. </html>  
Output:

Output
Now, our example is running; just click on ‘Get Data’ button to display the ‘$location’ service properties or methods:

Output
The above screen shot you can see highlighted, it’s nothing but how you can use current running address bar URL in your application.

Great, $location service in AngularJS with example created successfully!

Summary

I hope that beginners as well as students can understand the concept of $location service in AngularJS with example. If you have any suggestionsregarding this article, then please contact me. Stay tuned for other concepts of AngularJS coming soon!

Thanks for reading. Learn it! Share it!

Read more articles on AngularJS:


Similar Articles