CODEWITHSUNDEEP
angularjsangular-ui-router
Jonathan Aquino
Jonathan Aquino

Reputation: 3870

Angular UI Router: Back-button not working for simple code

This simple code has two links, "State 1" and "State 2".

When I click "State 1", it prints out "This is the first state". When I click "State 2", it prints out "This is the second state".

But then when I click my browser's back button, it still says "This is the second state". Shouldn't it change to "This is the first state"?

CodePen: http://codepen.io/anon/pen/bCohi

The code:

<html>
<head>
  <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js'></script>  
  <script type="text/javascript" src='http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js'></script>
</head>
<body ng-app="myApp">
  <a ui-sref="state1">State 1</a>
  <a ui-sref="state2">State 2</a>
  <br>
  <ui-view></ui-view>
  <script>
  var myApp = angular.module("myApp", ['ui.router']);

  myApp.config(function($stateProvider, $urlRouterProvider) {
    var stateProvider = $stateProvider;
    stateProvider.state('state1', {
      url: 'state-1',
      template: 'This is the first state'
    });
    stateProvider.state('state2', {
      url: 'state-2',
      template: 'This is the second state'
    });
  });
  </script>
</body>
</html>

Upvotes: 3

Views: 2403

Answers (1)

Jonathan Aquino
Jonathan Aquino

Reputation: 3870

Oh - I figured it out. 

url: 'state-1',
. . . . . . . . . .
url: 'state-2',

should be

url: '/state-1',
. . . . . . . . . .
url: '/state-2',

Upvotes: 7

Related Questions