angularjs-$location

$location service parses the URL (based on window.location) in the address bar of the browser, allowing us to use the contents of the URL more conveniently in the app. Changing the URL in the Address bar responds to the $location service, and the URL is modified in $location and also responds to the address bar.

$location Services:

• Exposes the URL of the current browser address bar, so we can
  • Note and observe URLs
  • Change URL
• Synchronize URLs with the browser when the user does the following:

1. Change the Address bar
2. Click the Back or Forward button (or click a history link).
3. Click a link

• Depicts a URL object as a series of methods (Protocol,host,path,search,hash).

1. Compare $location and Window.location

1) Purpose: window.location and $location services allow read and write access to the location of the current browser.

2) API:window.location exposes an unprocessed object with some properties that can be modified directly, while the $location service exposes some jquery-style getter/setter methods.

3) Integration with angular application declaration cycle: $location know the stages of all internal declaration cycles, integrate with $watch, and window.location.

4) seamless integration with HTML5 API: Yes (with a fallback for legacy browsers, is there a compatible means for a lower version of the browser? ), while Window.location is not.

5) know the document root (Docroot) or context in which the app is loaded: Window.location No, Wnidow.location.path will return/docroot/subpath; $location.path ( ) returns the true Docroot.

2. When to use $location?

In the app, any need to respond to changes to the current URL, or to change the URL of the current browser.

3. Things that $location can't do

When the URL of the browser changes, it does not cause the page to reload (reload). If you need to do this (change the address to implement page reload), use the lower-level API, $window. Location.href.

4. $location API

Configuration:

The configuration of the $location service requires $locationprovider, parameters:

1. Html5mode (Mode): {Boolean} defaults to False, Hashbang mode; If true, HTML5 mode
2. Hasprefix (prefix): {string} default '! ', Hashbang prefix used

Getter, Setter method

The $location service provides getter methods for the read-only URL portion (Absurl,protocol,host,port), and also provides Url,path,search,hash getter and setter methods.

   // get The current path     $location. Path ();     // Change the path    $location. Path ('/newvalue')

All setter methods return the same $location object to implement the chained syntax. For example, to modify multiple attributes in one sentence, the chained setter method is similar:

$location. Path ('/newvalue '). Search ({key:value});

Replace method

The Replace method, which can be used to tell the $location service to use a path instead of the latest history when synchronizing with the browser the next time, instead of creating a new history record. The Replace method is useful when we want to implement redirection (redirection) and do not want to invalidate the Back button (back button to re-trigger redirection). If you want to change the current URL without creating a new history, we can do this:

$location. Path ('/somenewpath '). replace ();

Note that the setter method does not update window.location immediately. Instead, the $location service knows the scope life cycle and merges multiple $location into one, and commits to the Window.location object in the $digest phase of the scope. Because $location changes in multiple states are merged into a single change, in the browser, only the replace () method is called once, so that the entire commit has only one replace (), which does not cause the browser to create additional history. Once the browser is updated, the $location service resets the flag bit through the Replace () method, and future changes will create a new history, unless replace () is called again.

5. Hashbang and HTML5 Modes

$location There are two configuration modes, you can control the URL format in the browser address bar: Hashbang mode (default), with HTML5 mode using the HTML5 history API. In both modes, the app uses the same API, $location service works with the right URL fragment, browser API, and helps us with browser URL changes and historical management.

Transferred from: http://www.cnblogs.com/jcomet/p/4350341.html

angularjs-$location