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>
Output:
Reference: https://docs.angularjs.org/api/ng/provider/$locationProvider#overview
Similar Reads
How to Create Todo List in Angular 7 ? The ToDo app is used to help us to remember some important task. We just add the task and when accomplished, delete them. This to-do list uses various Bootstrap classes that make our web application not only attractive but also responsive. Approach: Create a new angular app using following command:
2 min read
Build a Simple Web App with Express & Angular Building a simple web app using Express and Angular is a great way to understand the fundamentals of full-stack development. Express, a minimalist web framework for Node.js, handles the backend, while Angular, a powerful front-end framework, provides the structure for the client-side application.In
5 min read
How to build progressive web app(PWA) in Angular 9 ? In this article, we will develop a PWA (Progressive Web App) using Angular. What is PWA ? Progressive Web Apps (PWAs) are web applications that have been designed so that they are capable, reliable, and installable. PWA are built and enhanced with modern APIs to deliver enhanced capabilities, reliab
7 min read
Routing in Angular 9/10 Routing in Angular allows the users to create a single-page application with multiple views and allows navigation between them. Users can switch between these views without losing the application state and properties. Approach: Create an Angular app that to be used.Create the navigation links inside
3 min read
How to create a To-Do list using Drag and Drop in Angular 7 ? We can easily create a To-Do list using Drag-Drop module provided by angular Component Development Kit (CDK). First of all, create an angular component by using the following command- ng g c To-Do Now import CdkDragDrop, moveItemInArray, transferArrayItem from @angular/cdk/drag-drop to our to-Do com
2 min read
How to make a multi-select dropdown using Angular 11/10 ? In this article, we will learn to build the multiple selection drop-down menu in Angular. To accomplish this task, we require Angular 10 or the Angular 11 version. Sometimes we need to display dynamically fetched multi-selected data in a drop-down menu, for this, we will use the npm @ng-select/ng-se
3 min read
How to set focus on input field automatically on page load in AngularJS ? We can focus on any input field automatically using the angular directives. Here we create a custom directive that can auto-focus on any field in the form. Creating a custom directive is just like creating an Angular component. To create a custom directive we have to replace @Component decorator wit
3 min read
How to Scroll to an Element on click in Angular ? In this article, we will see how to scroll to an element on click in Angular. Here, we will create a component that enables scrolling to specific targets when a button is pressed within the document from one target to another.Steps for Installing & Configuring the Angular ApplicationStep 1: Crea
4 min read
AngularJS $locationProvider 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 AP
4 min read
AngularJS $location Service The $location in AngularJS basically uses a window.location service. The $location is used to read or change the URL in the browser and it is used to reflect that URL on our page. Any change made in the URL is stored in the $location service in AngularJS. There are various methods in the $location s
4 min read