feat(location): add configurable attr to force html5mode link rewriting

See this discussion: angular#14959

When using html5mode, sometimes it is necessary to not use the <base> tag
in order to support SVG icons. An example of this is in the discussion
linked above.

When we do this, sometimes we also want to disable "rewriteLinks" so that
we can still leave the Angular application via navigation.

This feature allows the user to explicitly mark an <a> tag as a link that
should not refresh from server, even if rewriteLinks is disabled.

Author: Wei Wang

docs/content/guide/$location.ngdoc

@@ -95,6 +95,8 @@ To configure the `$location` service, retrieve the
   `true` or `enabled:true` - see HTML5 mode<br />
   `false` or `enabled:false` - see Hashbang mode<br />
   `requireBase:true` - see Relative links<br />
+  `rewriteLinks:true` - see Html link rewriting<br />
+  `rewriteLinks:'string'` - see Html link rewriting<br />
   default: `enabled:false`
 
 - **hashPrefix(prefix)**: {string}<br />
@@ -326,6 +328,18 @@ reload to the original link.
 - Links starting with '/' that lead to a different base path<br>
   Example: `<a href="/not-my-base/link">link</a>`
 
+If `html5Mode.rewriteLinks` is set to `false` in the html5Mode definition object passed to
+`$locationProvider.html5Mode()`, the browser will perform a full page reload for every link.
+`html5Mode.rewriteLinks` can also be set to a string, which will enable link re-writing only on
+links that have the given attribute.
+
+For example, if `html5Mode.rewriteLinks` is set to "internal-link":
+- `<a href="/some/path" internal-link>link</a>` will be rewritten
+- `<a href="/some/path">link</a>` will perform a full page reload
+
+Note that attribute name (de)normalization does not apply here, so "internalLink" is different from
+"internal-link".
+
 
 ### Relative links
 
@@ -853,6 +867,3 @@ angular.module('locationExample', [])
 # Related API
 
 * {@link ng.$location `$location` API}
-
-
-

src/ng/location.js

@@ -750,8 +750,12 @@ function $LocationProvider() {
    *     whether or not a <base> tag is required to be present. If `enabled` and `requireBase` are
    *     true, and a base tag is not present, an error will be thrown when `$location` is injected.
    *     See the {@link guide/$location $location guide for more information}
-   *   - **rewriteLinks** - `{boolean}` - (default: `true`) When html5Mode is enabled,
-   *     enables/disables url rewriting for relative links.
+   *   - **rewriteLinks** - `{boolean|String}` - (default: `true`) When html5Mode is enabled,
+   *     enables/disables url rewriting for relative links. If set to a string, url rewriting will
+   *     only happen on links with an attribute that matches the given string. For example, if set
+   *     to "internal-link", then the URL will only be rewritten for `<a internal-link>` links. Note
+   *     that attribute name (de)normalization is not happening here. So "internal-link" is
+   *     different from "internalLink".
    *
    * @returns {Object} html5Mode object if used as getter or itself (chaining) if used as setter
    */
@@ -769,7 +773,7 @@ function $LocationProvider() {
         html5Mode.requireBase = mode.requireBase;
       }
 
-      if (isBoolean(mode.rewriteLinks)) {
+      if (isBoolean(mode.rewriteLinks) || isString(mode.rewriteLinks)) {
         html5Mode.rewriteLinks = mode.rewriteLinks;
       }
 
@@ -866,10 +870,11 @@ function $LocationProvider() {
     }
 
     $rootElement.on('click', function(event) {
+      var rewriteLinks = html5Mode.rewriteLinks;
       // TODO(vojta): rewrite link when opening in new tab/window (in legacy browser)
       // currently we open nice url link and redirect then
 
-      if (!html5Mode.rewriteLinks || event.ctrlKey || event.metaKey || event.shiftKey || event.which === 2 || event.button === 2) return;
+      if (!rewriteLinks || event.ctrlKey || event.metaKey || event.shiftKey || event.which === 2 || event.button === 2) return;
 
       var elm = jqLite(event.target);
 
@@ -879,6 +884,8 @@ function $LocationProvider() {
         if (elm[0] === $rootElement[0] || !(elm = elm.parent())[0]) return;
       }
 
+      if (isString(rewriteLinks) && isUndefined(elm.attr(rewriteLinks))) return;
+
       var absHref = elm.prop('href');
       // get the actual href attribute - see
       // http://msdn.microsoft.com/en-us/library/ie/dd347148(v=vs.85).aspx

test/ng/locationSpec.js

@@ -1601,6 +1601,43 @@ describe('$location', function() {
     });
 
 
+    it('should rewrite links when the specified rewriteLinks attr is detected', function() {
+      configureTestLink({
+        linkHref: 'link?a#b',
+        attrs: 'force-rewrite',
+        html5Mode: {enabled: true, rewriteLinks:false},
+        supportHist: true
+      });
+      initService({html5Mode:{enabled: true, rewriteLinks:'force-rewrite'},supportHistory:true});
+      inject(
+        initBrowser({ url: 'http://host.com/base/index.html', basePath: '/base/index.html' }),
+        setupRewriteChecks(),
+        function($browser) {
+          browserTrigger(link, 'click');
+          expectRewriteTo($browser, 'http://host.com/base/link?a#b');
+        }
+      );
+    });
+
+
+    it('should not rewrite links when the specified rewriteLinks attr is not detected', function() {
+      configureTestLink({
+        linkHref: 'link?a#b',
+        html5Mode: {enabled: true, rewriteLinks:'no-rewrite'},
+        supportHist: true
+      });
+      initService({html5Mode:{enabled: true, rewriteLinks:'yes-rewrite'},supportHistory:true});
+      inject(
+        initBrowser({ url: 'http://host.com/base/index.html', basePath: '/base/index.html' }),
+        setupRewriteChecks(),
+        function($browser) {
+          browserTrigger(link, 'click');
+          expectNoRewrite($browser);
+        }
+      );
+    });
+
+
     it('should rewrite full url links to same domain and base path', function() {
       configureTestLink({linkHref: 'http://host.com/base/new'});
       initService({html5Mode:true,supportHistory:false,hashPrefix:'!'});
@@ -2357,19 +2394,32 @@ describe('$location', function() {
       });
 
 
-      it('should only overwrite existing properties if values are boolean', function() {
+      it('should only overwrite existing properties if values are the correct type', function() {
         module(function($locationProvider) {
           $locationProvider.html5Mode({
             enabled: 'duh',
             requireBase: 'probably',
-            rewriteLinks: 'nope'
+            rewriteLinks: false
           });
 
           expect($locationProvider.html5Mode()).toEqual({
             enabled: false,
             requireBase: true,
-            rewriteLinks: true
+            rewriteLinks: false
+          });
+        });
+
+        inject(function() {});
+      });
+
+
+      it('should allow rewriteLinks config to be set to a string', function() {
+        module(function($locationProvider) {
+          $locationProvider.html5Mode({
+            rewriteLinks: 'yes-rewrite'
           });
+
+          expect($locationProvider.html5Mode().rewriteLinks).toEqual('yes-rewrite');
         });
 
         inject(function() {});