3
3
@sortOrder 500
4
4
@description
5
5
6
- # What does it do?
6
+ # Using the `$location` service
7
7
8
8
The `$location` service parses the URL in the browser address bar (based on [`window.location`](https://developer.mozilla.org/en/window.location)) and makes the URL available to
9
9
your application. Changes to the URL in the address bar are reflected into the `$location` service and
@@ -76,7 +76,7 @@ the current URL in the browser.
76
76
It does not cause a full page reload when the browser URL is changed. To reload the page after
77
77
changing the URL, use the lower-level API, `$window.location.href`.
78
78
79
- # General overview of the API
79
+ ## General overview of the API
80
80
81
81
The `$location` service can behave differently, depending on the configuration that was provided to
82
82
it when it was instantiated. The default configuration is suitable for many applications, for
@@ -85,7 +85,7 @@ others customizing the configuration can enable new features.
85
85
Once the `$location` service is instantiated, you can interact with it via jQuery-style getter and
86
86
setter methods that allow you to get or change the current URL in the browser.
87
87
88
- ## `$location` service configuration
88
+ ### `$location` service configuration
89
89
90
90
To configure the `$location` service, retrieve the
91
91
{@link ng.$locationProvider $locationProvider} and set the parameters as follows:
@@ -113,12 +113,12 @@ To configure the `$location` service, retrieve the
113
113
Prefix used for Hashbang URLs (used in Hashbang mode or in legacy browsers in HTML5 mode).<br />
114
114
Default: `'!'`
115
115
116
- ### Example configuration
116
+ #### Example configuration
117
117
```js
118
118
$locationProvider.html5Mode(true).hashPrefix('*');
119
119
```
120
120
121
- ## Getter and setter methods
121
+ ### Getter and setter methods
122
122
123
123
`$location` service provides getter methods for read-only parts of the URL (absUrl, protocol, host,
124
124
port) and getter / setter methods for url, path, search, hash:
@@ -137,7 +137,7 @@ change multiple segments in one go, chain setters like this:
137
137
$location.path('/newValue').search({key: value});
138
138
```
139
139
140
- ## Replace method
140
+ ### Replace method
141
141
142
142
There is a special `replace` method which can be used to tell the $location service that the next
143
143
time the $location service is synced with the browser, the last history record should be replaced
@@ -173,7 +173,7 @@ encoded.
173
173
`/path?search=a&b=c#hash`. The segments are encoded as well.
174
174
175
175
176
- # Hashbang and HTML5 Modes
176
+ ## Hashbang and HTML5 Modes
177
177
178
178
`$location` service has two configuration modes which control the format of the URL in the browser
179
179
address bar: **Hashbang mode** (the default) and the **HTML5 mode** which is based on using the
@@ -221,15 +221,15 @@ facilitate the browser URL change and history management.
221
221
</tbody>
222
222
</table>
223
223
224
- ## Hashbang mode (default mode)
224
+ ### Hashbang mode (default mode)
225
225
226
226
In this mode, `$location` uses Hashbang URLs in all browsers.
227
227
AngularJS also does not intercept and rewrite links in this mode. I.e. links work
228
228
as expected and also perform full page reloads when other parts of the url
229
229
than the hash fragment was changed.
230
230
231
231
232
- ### Example
232
+ #### Example
233
233
234
234
```js
235
235
it('should show example', function() {
@@ -255,7 +255,7 @@ it('should show example', function() {
255
255
});
256
256
```
257
257
258
- ## HTML5 mode
258
+ ### HTML5 mode
259
259
260
260
In HTML5 mode, the `$location` service getters and setters interact with the browser URL address
261
261
through the HTML5 history API. This allows for use of regular URL path and search segments,
@@ -271,7 +271,7 @@ Note that in this mode, AngularJS intercepts all links (subject to the "Html lin
271
271
and updates the url in a way that never performs a full page reload.
272
272
273
273
274
- ### Example
274
+ #### Example
275
275
276
276
```js
277
277
it('should show example', function() {
@@ -320,14 +320,14 @@ it('should show example (when browser doesn\'t support HTML5 mode', function() {
320
320
});
321
321
```
322
322
323
- ### Fallback for legacy browsers
323
+ #### Fallback for legacy browsers
324
324
325
325
For browsers that support the HTML5 history API, `$location` uses the HTML5 history API to write
326
326
path and search. If the history API is not supported by a browser, `$location` supplies a Hashbang
327
327
URL. This frees you from having to worry about whether the browser viewing your app supports the
328
328
history API or not; the `$location` service makes this transparent to you.
329
329
330
- ### HTML link rewriting
330
+ #### HTML link rewriting
331
331
332
332
When you use HTML5 history API mode, you will not need special hashbang links. All you have to do
333
333
is specify regular URL links, such as: `<a href="/some?foo=bar">link</a>`
@@ -361,7 +361,7 @@ Note that [attribute name normalization](guide/directive#normalization) does not
361
361
`'internalLink'` will **not** match `'internal-link'`.
362
362
363
363
364
- ### Relative links
364
+ #### Relative links
365
365
366
366
Be sure to check all relative links, images, scripts etc. AngularJS requires you to specify the url
367
367
base in the head of your main html file (`<base href="/my-base/index.html">`) unless `html5Mode.requireBase`
@@ -374,14 +374,14 @@ will only change `$location.hash()` and not modify the url otherwise. This is us
374
374
to anchors on the same page without needing to know on which page the user currently is.
375
375
376
376
377
- ### Server side
377
+ #### Server side
378
378
379
379
Using this mode requires URL rewriting on server side, basically you have to rewrite all your links
380
380
to entry point of your application (e.g. index.html). Requiring a `<base>` tag is also important for
381
381
this case, as it allows AngularJS to differentiate between the part of the url that is the application
382
382
base and the path that should be handled by the application.
383
383
384
- ### Base href constraints
384
+ #### Base href constraints
385
385
386
386
The `$location` service is not able to function properly if the current URL is outside the URL given
387
387
as the base href. This can have subtle confusing consequences...
@@ -403,7 +403,7 @@ legacy browsers and hashbang links in modern browser:
403
403
- Modern browser will rewrite hashbang URLs to regular URLs.
404
404
- Older browsers will redirect regular URLs to hashbang URLs.
405
405
406
- ### Example
406
+ #### Example
407
407
408
408
Here you can see two `$location` instances that show the difference between **Html5 mode** and **Html5 Fallback mode**.
409
409
Note that to simulate different levels of browser support, the `$location` instances are connected to
@@ -415,7 +415,7 @@ redirect to regular / hashbang url, as this conversion happens only during parsi
415
415
416
416
In these examples we use `<base href="/base/index.html" />`. The inputs represent the address bar of the browser.
417
417
418
- #### Browser in HTML5 mode
418
+ ##### Browser in HTML5 mode
419
419
<example module="html5-mode" name="location-html5-mode">
420
420
<file name="index.html">
421
421
<div ng-controller="LocationController">
@@ -565,7 +565,7 @@ In these examples we use `<base href="/base/index.html" />`. The inputs represen
565
565
566
566
</example>
567
567
568
- #### Browser in HTML5 Fallback mode (Hashbang mode)
568
+ ##### Browser in HTML5 Fallback mode (Hashbang mode)
569
569
<example module="hashbang-mode" name="location-hashbang-mode">
570
570
<file name="index.html">
571
571
<div ng-controller="LocationController">
@@ -718,15 +718,15 @@ In these examples we use `<base href="/base/index.html" />`. The inputs represen
718
718
719
719
</example>
720
720
721
- # Caveats
721
+ ## Caveats
722
722
723
- ## Page reload navigation
723
+ ### Page reload navigation
724
724
725
725
The `$location` service allows you to change only the URL; it does not allow you to reload the
726
726
page. When you need to change the URL and reload the page or navigate to a different page, please
727
727
use a lower level API, {@link ng.$window $window.location.href}.
728
728
729
- ## Using $location outside of the scope life-cycle
729
+ ### Using $location outside of the scope life-cycle
730
730
731
731
`$location` knows about AngularJS's {@link ng.$rootScope.Scope scope} life-cycle. When a URL changes in
732
732
the browser it updates the `$location` and calls `$apply` so that all
@@ -738,15 +738,15 @@ propagate this change into browser and will notify all the {@link ng.$rootScope.
738
738
When you want to change the `$location` from outside AngularJS (for example, through a DOM Event or
739
739
during testing) - you must call `$apply` to propagate the changes.
740
740
741
- ## $location.path() and ! or / prefixes
741
+ ### $location.path() and ! or / prefixes
742
742
743
743
A path should always begin with forward slash (`/`); the `$location.path()` setter will add the
744
744
forward slash if it is missing.
745
745
746
746
Note that the `!` prefix in the hashbang mode is not part of `$location.path()`; it is actually
747
747
`hashPrefix`.
748
748
749
- ## Crawling your app
749
+ ### Crawling your app
750
750
751
751
To allow indexing of your AJAX application, you have to add special meta tag in the head section of
752
752
your document:
@@ -761,7 +761,7 @@ see [Making AJAX Applications
761
761
Crawlable](http://code.google.com/web/ajaxcrawling/docs/specification.html).
762
762
763
763
764
- # Testing with the $location service
764
+ ## Testing with the $location service
765
765
766
766
When using `$location` service during testing, you are outside of the angular's {@link
767
767
ng.$rootScope.Scope scope} life-cycle. This means it's your responsibility to call `scope.$apply()`.
@@ -785,14 +785,14 @@ describe('serviceUnderTest', function() {
785
785
```
786
786
787
787
788
- # Migrating from earlier AngularJS releases
788
+ ## Migrating from earlier AngularJS releases
789
789
790
790
In earlier releases of AngularJS, `$location` used `hashPath` or `hashSearch` to process path and
791
791
search methods. With this release, the `$location` service processes path and search methods and
792
792
then uses the information it obtains to compose hashbang URLs (such as
793
793
`http://server.com/#!/path?search=a`), when necessary.
794
794
795
- ## Changes to your code
795
+ ### Changes to your code
796
796
797
797
<table class="table">
798
798
<thead>
@@ -884,6 +884,6 @@ angular.module('locationExample', [])
884
884
</file>
885
885
</example>
886
886
887
- # Related API
887
+ ## Related API
888
888
889
889
* {@link ng.$location `$location` API}
0 commit comments