AngularJS $location Service

The AngularJS $interval service is similar to JavaScript's window.setInterval function. In angular it is refer to it through the $interval service. The $interval is just wrapper for window.setInterval function so that it will be easy to override, remove or mocked for testing.

The AngularJS $location Service is similar to window.location object and exposes the current URL in the browser address bar. The $location makes the URL available to your application. Any changes to the URL in the address bar are reflected into $location service and vice versa.

Syntax

var absUrl = $location.absUrl();
var protocol = $location.protocol();
var host = $location.host();
var port = $location.port();
var path = $location.path();
var searchObject = $location.search();
var hash = $location.hash();

AngularJS $location Service Example

<!DOCTYPE html>      
<html>      
<head> <!-- www.techstrikers.com -->      
 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.1/angular.min.js"></script>       
    <meta charset="utf-8">      
    <title>AngularJS $location Example</title>      
  <script>      
var app = angular.module('app', []);      
    app.controller("FilterController", function ($scope,$location) {      
      $scope.AbsUrl = function()      
      {      
        $scope.absUrl = $location.absUrl();     
      }      
      $scope.Protocol = function()      
      {      
         $scope.protocol = $location.protocol();         
      }
      $scope.Host = function()      
      {      
         $scope.host = $location.host();         
      }
      $scope.Port = function()      
      {      
         $scope.port = $location.port();         
      }
      $scope.Path = function()      
      {      
         $scope.path = $location.path();         
      }
      $scope.Search = function()      
      {      
         $scope.search = $location.search();         
      }
      $scope.Hash = function()      
      {      
         $scope.hash = $location.hash();         
      }
    });      
</script>      
</head>      
<body style="background-color:#DDE4E9;">      
  <fieldset style="background-color:#DDE4E9;">                  
    <legend>AngulerJS $location Service Example</legend>       
  <div ng-app="app">            
    <div ng-controller="FilterController">       
      Get AbsUrl:              
        <input type="string" ng-model="absUrl">              
        <button ng-click="AbsUrl()">Get AbsUrl</button></br>           
      Get Protocol:            
        <input type="string" ng-model="protocol">              
        <button ng-click="Protocol()">Get Protocol</button> </br> 
      Get Host:              
        <input type="string" ng-model="host">              
        <button ng-click="Host()">Get Host</button></br>           
      Get Port:            
        <input type="string" ng-model="port">              
        <button ng-click="Port()">Get Port</button> </br>
      Get Path:              
        <input type="string" ng-model="path">              
        <button ng-click="Path()">Get Path</button></br>           
      Get Search:            
        <input type="string" ng-model="search">              
        <button ng-click="Search()">Get Search</button> </br>
      Get Hash:            
        <input type="string" ng-model="hash">              
        <button ng-click="Hash()">Get Hash</button> </br>
    </div>            
</div>      
 </fieldset>       
</body>      
</html>

See Live Example

« Previous