- $locationProvider
- service in module ng
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:
- Exposes the current URL in the browser address bar, so you can
- Watch and observe the URL.
- Change the URL.
- Synchronizes the URL with the browser when the user
- Changes the address bar.
- Clicks the back or forward button (or clicks a History link).
- Clicks on a link.
- Represents the URL object as a set of methods (protocol, host, port, path, search, hash).
For more information see Developer Guide: Using $location
Dependencies
Methods
-
absUrl();
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"
Returns
string
full url
-
url([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"
Parameters
Param Type Details url (optional)string
New url without base prefix (e.g.
/path?a=b#hash
)Returns
string
url
-
protocol();
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"
Returns
string
protocol of current url
-
host();
This method is getter only.
Return host of current url.
Note: compared to the non-angular version
location.host
which returnshostname:port
, this returns thehostname
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"
Returns
string
host of current url.
-
port();
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
Returns
Number
port
-
path([path]);
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"
Parameters
Param Type Details path (optional)string
number
New path
Returns
string
path
-
search(search, [paramValue]);
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'}
Parameters
Param Type Details search string
Object.<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
search
component of$location
to the specified value.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)string
Number
Array.<string>
boolean
If
search
is a string or number, thenparamValue
will override only a single search property.If
paramValue
is an array, it will override the property of thesearch
component of$location
specified via the first argument.If
paramValue
isnull
, the property specified via the first argument will be deleted.If
paramValue
istrue
, the property specified via the first argument will be added with no value nor trailing equal sign.Returns
Object
If called with no arguments returns the parsed
search
object. If called with one or more arguments returns$location
object itself. -
hash([hash]);
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"
Parameters
Param Type Details hash (optional)string
number
New hash fragment
Returns
string
hash
-
replace();
If called, all changes to $location during the current
$digest
will replace the current history record, instead of adding a new one. -
state([state]);
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 topushState
orreplaceState
.NOTE: This method is supported only in HTML5 mode and only in browsers supporting the HTML5 History API (i.e. methods
pushState
andreplaceState
). If you need to support older browsers (like IE9 or Android < 4.0), don't use this method.Parameters
Param Type Details state (optional)object
State object for pushState or replaceState
Returns
object
state
Events
-
$locationChangeStart
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
andoldState
parameters may be defined only in HTML5 mode and when the browser supports the HTML5 History API.Type:
broadcastTarget:
root scopeParameters
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.
-
$locationChangeSuccess
Broadcasted after a URL was changed.
The
newState
andoldState
parameters may be defined only in HTML5 mode and when the browser supports the HTML5 History API.Type:
broadcastTarget:
root scopeParameters
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.