feat(ui-sref): support URL fragments in html5Mode

src/state.js

@@ -1112,10 +1112,11 @@ function $StateProvider(   $urlRouterProvider,   $urlMatcherFactory) {
      * - **`relative`** - {object=$state.$current}, When transitioning with relative path (e.g '^'), 
      *    defines which state to be relative from.
      * - **`absolute`** - {boolean=false},  If true will generate an absolute url, e.g. "http://www.example.com/fullurl".
-     * 
+     * @param {string} fragment (optional) The URL fragment to append (only for HTML5Mode).
+     *
      * @returns {string} compiled state url
      */
-    $state.href = function href(stateOrName, params, options) {
+    $state.href = function href(stateOrName, params, options, fragment) {
       options = extend({
         lossy:    true,
         inherit:  true,
@@ -1135,7 +1136,7 @@ function $StateProvider(   $urlRouterProvider,   $urlMatcherFactory) {
       }
       return $urlRouter.href(nav.url, filterByKeys(objectKeys(state.params), params || {}), {
         absolute: options.absolute
-      });
+      }, fragment);
     };
 
     /**

src/stateDirectives.js

@@ -1,9 +1,9 @@
 function parseStateRef(ref, current) {
   var preparsed = ref.match(/^\s*({[^}]*})\s*$/), parsed;
   if (preparsed) ref = current + '(' + preparsed[1] + ')';
-  parsed = ref.replace(/\n/g, " ").match(/^([^(]+?)\s*(\((.*)\))?$/);
-  if (!parsed || parsed.length !== 4) throw new Error("Invalid state ref '" + ref + "'");
-  return { state: parsed[1], paramExpr: parsed[3] || null };
+  parsed = ref.replace(/\n/g, " ").match(/^([^(]+?)\s*(?:\((.*)\))?(?:#(.*?))?$/);
+  if (!parsed || parsed.length < 2) throw new Error("Invalid state ref '" + ref + "'");
+  return { state: parsed[1], paramExpr: parsed[2] || null, fragment: parsed[3] };
 }
 
 function stateContext(el) {
@@ -103,7 +103,7 @@ function $StateRefDirective($state, $timeout) {
         if (newVal) params = angular.copy(newVal);
         if (!nav) return;
 
-        newHref = $state.href(ref.state, params, options);
+        newHref = $state.href(ref.state, params, options, ref.fragment);
 
         var activeDirective = uiSrefActive[1] || uiSrefActive[0];
         if (activeDirective) {

src/urlRouter.js

@@ -374,10 +374,11 @@ function $UrlRouterProvider(   $locationProvider,   $urlMatcherFactory) {
        * @param {object=} options Options object. The options are:
        *
        * - **`absolute`** - {boolean=false},  If true will generate an absolute url, e.g. "http://www.example.com/fullurl".
+       * @param {string} fragment (optional) The URL fragment to append (only for HTML5Mode).
        *
        * @returns {string} Returns the fully compiled URL, or `null` if `params` fail validation against `urlMatcher`
        */
-      href: function(urlMatcher, params, options) {
+      href: function(urlMatcher, params, options, fragment) {
         if (!urlMatcher.validates(params)) return null;
 
         var isHtml5 = $locationProvider.html5Mode();
@@ -391,6 +392,9 @@ function $UrlRouterProvider(   $locationProvider,   $urlMatcherFactory) {
         if (!isHtml5 && url !== null) {
           url = "#" + $locationProvider.hashPrefix() + url;
         }
+        else if (isHtml5 && url !== null && fragment !== undefined) {
+          url += '#' + fragment;
+        }
         url = appendBasePath(url, isHtml5, options.absolute);
 
         if (!options.absolute || !url) {

test/stateDirectivesSpec.js

@@ -289,6 +289,12 @@ describe('uiStateRef', function() {
       expect($state.current.name).toEqual('top');
       expect($stateParams).toEqualData({});
     }));
+
+    it('should support URL fragments', inject(function ($rootScope, $compile) {
+      var el = angular.element('<a ui-sref="contacts.item.detail({id: 1})#contact-info"></a>');
+      $compile(el)($rootScope);
+      expect(el.attr('href')).toBe('/contacts/1#contact-info');
+    }));
   });
 
   describe('forms', function() {

test/urlRouterSpec.js

@@ -208,6 +208,13 @@ describe("UrlRouter", function () {
 
         expect($urlRouter.href(new UrlMatcher('/hello'))).toBe('#/hello');
       }));
+
+      it('should support fragments in html5Mode', inject(function($urlRouter, $urlMatcherFactory) {
+        $lp.html5Mode(true);
+
+        var matcher = new UrlMatcher("/foo#item-:id");
+        expect($urlRouter.href(matcher, {id: 1})).toBe('/foo#item-1');
+      }));
     });
   });