AngularJS $locationProvider

Last Updated : 29 Jan, 2023

The $locationProvider facilitates the configuration of the application by implementing the deep linking paths that are stored. Here are some of the things that can be made with the $locationProvider service:

Set the html5Mode property to true to enable HTML5 mode, which uses the history.pushState API to change the URL without reloading the page.
Set the hashPrefix property to a string to specify a prefix for the hash part of the URL (e.g. #!). This is used when HTML5 mode is not enabled.
Set the hashPrefix to ‘!’ to enable the “hashbang” mode, which is used by some search engines to index single-page applications.

Syntax:

angular.module('myApp', [])
 .config(function($locationProvider) {
   $locationProvider.html5Mode(true);
 });

Here are some of the functions available on the $locationProvider service:

html5Mode(mode): Enables or disables HTML5 mode. When HTML5 mode is enabled, the $location service uses the history.pushState API to change the URL without reloading the page. When HTML5 mode is disabled, the $location service uses the hash part of the URL (e.g. #/path) to represent the current URL.
hashPrefix(prefix): Sets the prefix for the hash part of the URL (e.g. #!). This is used when HTML5 mode is not enabled.
baseHref(href): Sets the base URL for the application. This is used to resolve relative URLs.

Here are the different functions of the $location service in AngularJS that is configured by the $locationProvider service:

absUrl(): Returns the full URL of the current page, including the protocol (http or https), domain, and any query string parameters.
path(): Returns the current path of the URL.
hash(): Returns the current hash fragment of the URL.
search(): Returns the current search parameters of the URL as an object.
url(url): Sets the URL of the current page. If a URL is provided, it sets the URL to the provided value. If no value is provided, it returns the current URL.
path(path): Sets the path of the current URL. If a path is provided, it sets the path to the provided value. If no value is provided, it returns the current path.
hash(hash): Sets the hash fragment of the current URL. If a hash fragment is provided, it sets the hash fragment to the provided value. If no value is provided, it returns the current hash fragment.
search(search): Sets the search parameters of the current URL. If search parameters are provided, it sets the search parameters to the provided value. If no value is provided, it returns the current search parameters.

Example 1: In this example, the MainCtrl controller uses the $location service to read the current URL and store it in the currentUrl scope variable. The current URL is then displayed in the page using AngularJS’s expression syntax ({{}}). When the page is loaded, the $location service will read the current URL from the browser’s address bar and make it available to the application. The absUrl method returns the full URL, including the protocol (http or https), domain, and any query string parameters.

HTML

<!DOCTYPE html> 
<html ng-app="myApp"> 
  
<head> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"> 
    </script> 
    <script> 
        angular.module('myApp', []).config(function ($locationProvider) { 
            $locationProvider.html5Mode(false); 
        }) 
            .controller('MainCtrl', function ($scope, $location) { 
                $scope.currentUrl = $location.absUrl(); 
            }); 
    </script> 
    <style> 
        h1 { 
            color: green 
        } 
    </style> 
</head> 
  
<body ng-controller="MainCtrl"> 
    <center> 
        <h1> GeeksforGeeks</h1> 
        Current URL: {{currentUrl}} 
    </center> 
</body> 
  
</html>

Output:

Example 2: In this example, we have a simple page with two links that change the URL when clicked. When the user clicks on one of the links, the changeLocation function is called, which uses the $location service to change the URL by setting the path property. The $location service then updates the browser’s address bar with the new URL. In this code, the $locationProvider.html5Mode function is set to false, which means that the $location service will use the hashbang URL syntax instead of the HTML5 pushstate API. This means that the URL will change to #!/Home when the “Go to Home” button is clicked.

HTML

<!DOCTYPE html> 
<html ng-app="myApp"> 
  
<head> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"> 
    </script> 
    <script> 
        angular.module('myApp', []).config(function ($locationProvider) { 
            $locationProvider.html5Mode(false); 
        }) 
            .controller('MainCtrl', function ($scope, $location) { 
                $scope.changeLocation = function (path) { 
                    $location.path(path); 
                }; 
            }); 
    </script> 
    <style> 
        h1 { 
            color: green 
        } 
  
        button { 
            color: white; 
            background-color: black; 
            height: 30px; 
            width: 130px; 
            padding: 3px; 
            margin: 5px; 
            border-radius: 5px; 
        } 
    </style> 
</head> 
  
<body ng-controller="MainCtrl"> 
    <center> 
        <h1> 
            GeeksforGeeks 
        </h1> 
        <button ng-click="changeLocation('/Home')"> 
            Go to Home 
        </button> 
        <button ng-click="changeLocation('/Contact')"> 
            Go to Contact 
        </button> 
    </center> 
</body> 
  
</html>