The $location service parses the URL in the browser address bar (based on the window.location) and makes the URL available to your application. Changes to the URL in the address bar are reflected into $location service and changes to $location are reflected into the browser address bar.
The $location service:
For more information see Developer Guide: Using $location
This method is getter only.
Return full url representation with all segments encoded according to rules specified in RFC 3986.
// given url http://example.com/#/some/path?foo=bar&baz=xoxo
var absUrl = $location.absUrl();
// => "http://example.com/#/some/path?foo=bar&baz=xoxo"| string | full url |
This method is getter / setter.
Return url (e.g. /path?a=b#hash) when called without any parameter.
Change path, search and hash, when called with parameter and return $location.
// given url http://example.com/#/some/path?foo=bar&baz=xoxo
var url = $location.url();
// => "/some/path?foo=bar&baz=xoxo"| Param | Type | Details |
|---|---|---|
|
url
(optional)
|
string |
New url without base prefix (e.g. |
| string | url |
This method is getter only.
Return protocol of current url.
// given url http://example.com/#/some/path?foo=bar&baz=xoxo
var protocol = $location.protocol();
// => "http"| string | protocol of current url |
This method is getter only.
Return host of current url.
Note: compared to the non-angular version location.host which returns hostname:port, this returns the hostname portion only.
// given url http://example.com/#/some/path?foo=bar&baz=xoxo
var host = $location.host();
// => "example.com"
// given url http://user:password@example.com:8080/#/some/path?foo=bar&baz=xoxo
host = $location.host();
// => "example.com"
host = location.host;
// => "example.com:8080"| string | host of current url. |
This method is getter only.
Return port of current url.
// given url http://example.com/#/some/path?foo=bar&baz=xoxo
var port = $location.port();
// => 80| Number | port |
This method is getter / setter.
Return path of current url when called without any parameter.
Change path when called with parameter and return $location.
Note: Path should always begin with forward slash (/), this method will add the forward slash if it is missing.
// given url http://example.com/#/some/path?foo=bar&baz=xoxo
var path = $location.path();
// => "/some/path"| Param | Type | Details |
|---|---|---|
|
path
(optional)
|
stringnumber |
New path |
| string | path |
This method is getter / setter.
Return search part (as object) of current url when called without any parameter.
Change search part when called with parameter and return $location.
// given url http://example.com/#/some/path?foo=bar&baz=xoxo
var searchObject = $location.search();
// => {foo: 'bar', baz: 'xoxo'}
// set foo to 'yipee'
$location.search('foo', 'yipee');
// $location.search() => {foo: 'yipee', baz: 'xoxo'}| Param | Type | Details |
|---|---|---|
| search | stringObject.<string>Object.<Array.<string>> |
New search params - string or hash object. When called with a single argument the method acts as a setter, setting the If the argument is a hash object containing an array of values, these values will be encoded as duplicate search parameters in the url. |
|
paramValue
(optional)
|
stringNumberArray.<string>boolean |
If If If If |
| Object | If called with no arguments returns the parsed |
This method is getter / setter.
Returns the hash fragment when called without any parameters.
Changes the hash fragment when called with a parameter and returns $location.
// given url http://example.com/#/some/path?foo=bar&baz=xoxo#hashValue
var hash = $location.hash();
// => "hashValue"| Param | Type | Details |
|---|---|---|
|
hash
(optional)
|
stringnumber |
New hash fragment |
| string | hash |
If called, all changes to $location during the current $digest will replace the current history
record, instead of adding a new one.
This method is getter / setter.
Return the history state object when called without any parameter.
Change the history state object when called with one parameter and return $location.
The state object is later passed to pushState or replaceState.
NOTE: This method is supported only in HTML5 mode and only in browsers supporting
the HTML5 History API (i.e. methods pushState and replaceState). If you need to support
older browsers (like IE9 or Android < 4.0), don't use this method.
| Param | Type | Details |
|---|---|---|
|
state
(optional)
|
object |
State object for pushState or replaceState |
| object | state |
Broadcasted before a URL will change.
This change can be prevented by calling
preventDefault method of the event. See $rootScope.Scope for more
details about event object. Upon successful change
$locationChangeSuccess is fired.
The newState and oldState parameters may be defined only in HTML5 mode and when
the browser supports the HTML5 History API.
| Param | Type | Details |
|---|---|---|
| angularEvent | Object |
Synthetic event object. |
| newUrl | string |
New URL |
|
oldUrl
(optional)
|
string |
URL that was before it was changed. |
|
newState
(optional)
|
string |
New history state object |
|
oldState
(optional)
|
string |
History state object that was before it was changed. |
Broadcasted after a URL was changed.
The newState and oldState parameters may be defined only in HTML5 mode and when
the browser supports the HTML5 History API.
| Param | Type | Details |
|---|---|---|
| angularEvent | Object |
Synthetic event object. |
| newUrl | string |
New URL |
|
oldUrl
(optional)
|
string |
URL that was before it was changed. |
|
newState
(optional)
|
string |
New history state object |
|
oldState
(optional)
|
string |
History state object that was before it was changed. |