aboutsummaryrefslogtreecommitdiffstats
path: root/docs/content/guide/dev_guide.services.$location.ngdoc
diff options
context:
space:
mode:
authorIgor Minar2012-04-11 23:46:23 -0700
committerIgor Minar2012-04-12 02:36:03 -0700
commit6d7e7fdea6c3d6551ff40c150aa42e1375d2cb5f (patch)
tree47cc1d0f24f424df8f964595ee98a4c6b30bb981 /docs/content/guide/dev_guide.services.$location.ngdoc
parentdf72852f3496d7640bb4f70837338e464b7ed69f (diff)
downloadangular.js-6d7e7fdea6c3d6551ff40c150aa42e1375d2cb5f.tar.bz2
fix($location): properly rewrite urls in html5 mode with base url set
previously we were doing all kinds of checks to see if we should rewrite the url or not and we were missing many scenarios. not any more. with this change, we rewrite the url unless: - the href is not set - link has target attribute - the absolute url of the link doesn't match the absolute prefix for all urls in our app This also means that ng-ext-link attribute which we previously used to distinguish external links from app links is not necessary any more. apps can just set target=_self to prevent rewriting. BREAKING CHANGE: ng-ext-link directive was removed because it's unnecessary apps that relied on ng-ext-link should simply replace it with target=_self
Diffstat (limited to 'docs/content/guide/dev_guide.services.$location.ngdoc')
-rw-r--r--docs/content/guide/dev_guide.services.$location.ngdoc35
1 files changed, 19 insertions, 16 deletions
diff --git a/docs/content/guide/dev_guide.services.$location.ngdoc b/docs/content/guide/dev_guide.services.$location.ngdoc
index c99d26b0..f7ca5dbe 100644
--- a/docs/content/guide/dev_guide.services.$location.ngdoc
+++ b/docs/content/guide/dev_guide.services.$location.ngdoc
@@ -305,7 +305,7 @@ history API or not; the `$location` service makes this transparent to you.
### Html link rewriting
When you use the history API mode, you will need different links in different browser, but all you
-have to do is specify regular URL links, such as: `<a href="/some?foo=bar">link</a>`
+have to do is specify regular URL links, such as: `<a href="/some?foo=bar">link</a>`
When a user clicks on this link,
@@ -316,12 +316,13 @@ When a user clicks on this link,
In cases like the following, links are not rewritten; instead, the browser will perform a full page
reload to the original link.
-- Links with an `ngExtLink` directive<br />
- Example: `<a href="/ext/link?a=b" ng-ext-link>link</a>`
-- Links that contain `target="_blank"`<br />
- Example: `<a href="/ext/link?a=b" target="_blank">link</a>`
-- Absolute links that go to a different domain<br />
+- Links that contain `target` element<br>
+ Example: `<a href="/ext/link?a=b" target="_self">link</a>`
+- Absolute links that go to a different domain<br>
Example: `<a href="http://angularjs.org/">link</a>`
+- Links starting with '/' that lead to a different base path when base is defined<br>
+ Example: `<a href="/not-my-base/link">link</a>`
+
### Server side
@@ -341,11 +342,13 @@ Applications Crawlable}.
### Relative links
-Be sure to check all relative links, images, scripts etc. You must use an absolute path because the
-path is going to be rewritten. You can use `<base href="" />` tag as well.
+Be sure to check all relative links, images, scripts etc. You must either specify the url base in
+the head of your main html file (`<base href="/my-base">`) or you must use absolute urls
+(starting with `/`) everywhere because relative urls will be resolved to absolute urls using the
+initial absolute url of the document, which is often different from the root of the application.
Running Angular apps with the History API enabled from document root is strongly encouraged as it
-takes care of all relative link issues. **Otherwise you have to specify &lt;base href="" /&gt; !**
+takes care of all relative link issues.
### Sending links among different browsers
@@ -379,9 +382,9 @@ In this examples we use `<base href="/base/index.html" />`
$location.path() = {{$location.path()}}<br>
$location.search() = {{$location.search()}}<br>
$location.hash() = {{$location.hash()}}<br>
- <a href="/base/first?a=b">/base/first?a=b</a> |
- <a href="sec/ond?flag#hash">sec/ond?flag#hash</a> |
- <a href="/base/another?search" ng-ext-link>external</a>
+ <a href="http://www.host.com/base/first?a=b">/base/first?a=b</a> |
+ <a href="http://www.host.com/base/sec/ond?flag#hash">sec/ond?flag#hash</a> |
+ <a href="/other-base/another?search">external</a>
</div>
<div id="hashbang-mode" ng-controller="HashbangCntl">
@@ -393,9 +396,9 @@ In this examples we use `<base href="/base/index.html" />`
$location.path() = {{$location.path()}}<br>
$location.search() = {{$location.search()}}<br>
$location.hash() = {{$location.hash()}}<br>
- <a href="/base/first?a=b">/base/first?a=b</a> |
- <a href="sec/ond?flag#hash">sec/ond?flag#hash</a> |
- <a href="/base/another?search" ng-ext-link>external</a>
+ <a href="http://www.host.com/base/first?a=b">/base/first?a=b</a> |
+ <a href="http://www.host.com/base/sec/ond?flag#hash">sec/ond?flag#hash</a> |
+ <a href="/other-base/another?search">external</a>
</div>
</div>
@@ -445,7 +448,7 @@ In this examples we use `<base href="/base/index.html" />`
$compileProvider.directive('ngAddressBar', function() {
return function(scope, elm, attrs) {
var browser = browsers[attrs.browser],
- input = angular.element('<input type="text" />').val(browser.url()),
+ input = angular.element('<input type="text">').val(browser.url()),
delay;
input.bind('keypress keyup keydown', function() {