Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Ui-sref not generating hash in URL (Angular 1.3.0-rc.3)

Since upgrading from Angular 1.3.0 RC-2 to RC-3 the hash-sign in my links generated by ui-sref has disappeared. The link is clickable and the state transfers happens correctly, but if i copy the link address and paste it in a browser it will land on the wrong page. I dont want to use HTML5Mode.

1.3.0-rc.2

    <!DOCTYPE html>
    <html>

      <head>
        <link rel="stylesheet" href="style.css">
      </head>

      <body ng-app="myApp">

        <div ui-view></div>
        <script src="https://code.angularjs.org/1.3.0-rc.2/angular.js"></script>
        <script src="https://rawgit.com/angular-ui/ui-router/0.2.11/release/angular-ui-router.js"></script>
        <script>
          angular.module('myApp', ['ui.router'])
          .config(function($stateProvider, $urlRouterProvider, $locationProvider) {


            $urlRouterProvider.otherwise('/foo');

            $stateProvider.state('foo', {
              url: '/foo',
              template: 'This is foo <a ui-sref="foo.bar">Go to bar</a><div ui-view></div>'
            })
            .state('foo.bar', {
              url: '/bar',
              template: 'This is bar'
            })

            $locationProvider.html5Mode(false);
            //$locationProvider.html5Mode({ enabled: false })
          });
        </script>

      </body>

    </html>

Plunkr demonstrating working example

1.3.0-rc.4

    <!DOCTYPE html>
    <html>

      <head>
        <link rel="stylesheet" href="style.css">
      </head>

      <body ng-app="myApp">

        <div ui-view></div>
        <script src="https://code.angularjs.org/1.3.0-rc.4/angular.js"></script>
        <script src="https://rawgit.com/angular-ui/ui-router/0.2.11/release/angular-ui-router.js"></script>
        <script>
          angular.module('myApp', ['ui.router'])
          .config(function($stateProvider, $urlRouterProvider, $locationProvider) {


            $urlRouterProvider.otherwise('/foo');

            $stateProvider.state('foo', {
              url: '/foo',
              template: 'This is foo <a ui-sref="foo.bar">Go to bar</a><div ui-view></div>'
            })
            .state('foo.bar', {
              url: '/bar',
              template: 'This is bar'
            })

            //$locationProvider.html5Mode(false);
            $locationProvider.html5Mode({ enabled: false })
          });
        </script>

      </body>

    </html>

Plunkr demonstrating the problem

Am i doing something wrong, or is ui-router not compatible with the latest release candidate of Angular?

like image 233
hbentlov Avatar asked Oct 06 '14 15:10

hbentlov


1 Answers

That's a known issue. It's fixed in master. https://github.com/angular-ui/ui-router/issues/1397

Angular 1.3 changed the HTML5 mode API, and UI-Router has to support either API.

like image 55
Chris T Avatar answered Nov 14 '22 12:11

Chris T