Angular--$location and $window

$location

The $location service resolves the URL in the browser address (based on window.location) and makes the URL available in the application. Changes in Address bar URLs are reflected in the $location service and $location changes are reflected in the browser address bar.

Open the current URL in the browser's address bar, so you can:

1. Observe and listen to the URL.

2. Change the URL.

Synchronize with browser URL when User:

1. Change the value of the address bar.

2. Click the Back or Forward button (or click history link).

3. Click on the link.

A URL object that represents a set of methods (protocol, host, port, path, search, hash value).

Dependency : $rootElement

Method :

Absurl ();

Only getter, returned is the full URL.

URL ([url],[replace]);

Getter/setter, returns the current URL path (the contents after the current url#, including parameters and hashes).

Protocol ();

Can only getter, return the current URL of the protocol (such as Http,https).

Host ();

Only getter, which returns the host name of the current URL.

Port ();

Only getter, which returns the port number of the current URL.

Path ([path]);

Getter/setter, returns the subpath of the current URL (that is, the contents after the current url#, excluding parameters).

Search (Search,[paramvalue]);

Getter/setter a serialized JSON object that returns the parameters of the current URL.

hash ([hash]);

Getter/setter, returns the hash value of the current URL.

Replace ();

If called, all $location changes in the current $digest process supersede the current history, rather than adding a new history record.

State ([state]);

Returns the history state object of the current URL (excluding any parameters).

Changes the history state object when a parameter is called and returns $location.

Event :

$locationChangeStart

Broadcast when the URL is going to be changed. You can use Preventdefault to cancel the default event.

Parameters:

Angularevent: Synthetic Event object.

Newurl: The new URL.

Oldurl: The URL before the change.

NewState: The new historical state object.

Oldstate: The historical state object before the change.

$locationChangeSuccess

Broadcast after the URL has successfully completed a change.

Parameters:

Angularevent: Synthetic Event object.

Newurl: The new URL.

Oldurl: The URL before the change.

NewState: The new historical state object.

Oldstate: The historical state object before the change.

Using code:

(function() {angular.module (' Demo ', []). Controller (' Testctrl ', ["$location", "$scope", Testctrl]);functionTestctrl ($location, $scope) {var url = "Http://example.com:8080/#/some/path?foo=bar&baz=xoxo#hashValue"; $location. Absurl ();//Http://example.com/#/some/path?foo=bar&baz=xoxo#hashValue $location. URL ();//Some/path?foo=bar&baz=xoxo $location. Protocol ();//HTTP $location. Host ();//example.com $location. Port ();//8080 $location. path ();///some/path $location. Search (); // {foo: ' Bar ', Baz: ' xoxo '} $location. Search (' foo ', ' Yipee ' ); $location. Search (); // {foo: ' Yipee ', Baz: ' xoxo '} $location. hash (); // #hashValue $scope. $on ("$locationChangeStart",  Function () {// listener URL Change To do the desired processing before the change }); $scope. $on ("$locationChangeSuccess", function () { Span style= "color: #008000;" >// listen for the URL change, do the desired processing after the change }); } }()); 

$location is useful in daily development, especially $locationchangestart and $locationchangesuccess, in the presence of an interceptor when making a login decision, depending on the status of the Interceptor return, Listen for URL changes and exit to the login page when you need to log in.

$window

A reference to a browser window object. It is a global object that is globally available in window, but it causes some problems. It is also often mentioned in angular through the $window service, so it can be rewritten, deleted, and tested.

$window equal to window.

Verification Code:

  (function() {     angular.module (' Demo ', [])     . Controller (' Testctrl ', ["$window", Testctrl]);     function Testctrl ($window) {$window = = = window;}} ());

$window object can be used to get the properties of the browser window (such as window height width, browser version, and so on).

Angular--$location and $window