$location
$location parses the browser URL into path, search, hash, and state pieces.
Changes made through $location update the browser address bar, and browser
navigation updates the service.
Exact signatures live in TypeDoc:
Read The Current URL
$location.getPath();
$location.getSearch();
$location.getHash();
$location.getUrl();
$location.absUrl();
Update The URL
$location
.setPath("/settings")
.setSearch({ tab: "profile" })
.setHash("details");
Setter methods return $location, so updates can be chained.
Use setSearchParam() when only one query parameter should change. Passing
null or undefined removes that parameter.
$location.setSearchParam("page", 2);
$location.setSearchParam("filter", null);
Navigation Events
$locationChangeStart is broadcast on $rootScope before the URL changes. Call
event.preventDefault() from a listener to cancel the navigation.
$locationChangeSuccess is broadcast after the URL changes. In HTML5 mode,
listeners may also receive the new and old history state values when the browser
supports the History API.
$rootScope.on("$locationChangeStart", (event, newUrl, oldUrl) => {
if (shouldBlock(newUrl, oldUrl)) {
event.preventDefault();
}
});
$rootScope.on("$locationChangeSuccess", (_event, newUrl) => {
analytics.track("page_view", { url: newUrl });
});
Configure
Use module.config({ $location: ... }) for application-wide URL policy.
angular.createModule("app", []).config({
$location: {
html5Mode: {
enabled: true,
requireBase: false,
rewriteLinks: true,
},
hashPrefix: "!",
},
});
html5Mode may also be a boolean when only the enabled flag should change:
angular.createModule("app", []).config({
$location: {
html5Mode: false,
},
});
Executable sample:
location.html
Feedback
Was this page helpful?
Glad to hear it! Please tell us how we can improve.
Sorry to hear that. Please tell us how we can improve.