如何处理带有模板的页面上的后退按钮？

Question

I am working on a site using angularjs. I divide the page into two section: menu and content.

for example

this a page: /mainpage

<div>
  <div id="menu">
     <div ng-click="setTemplate('firstPage.html')">Page 1</div>
     <div ng-click="setTemplate('secondPage.html')">Page 2</div>
     <div ng-click="setTemplate('thirdPage.html')">Page 3</div>
  </div>
  <div id="content" ng-template="template">
  </div>
</div>

controller:

$scope.template = 'firstPage.html'; 
$scope.setTemplate = function(value){
   $scope.template = value; 
}

So after click on Page 1 Then Page 2 Then Page 3. So when i click on the back button, it load the last page / but not /mainpage with the right template. How would i handle the back button to not go back to previous page and go to previous template if there was a template change?

Thanks.

Answer 1

You should look at https://github.com/angular-ui/ui-router . You could build the functionality yourself, but ui-router is pretty much where you will end up.

Answer 2

The problem is you have nothing for it to default to. When you click back, it's just loading /mainpage, but it has no template to load in. Usually you use a $routeprovider for this:

$routeProvider
.when('/',
{
    controller: 'yourControllerName.js',
    templateUrl:'mainpage.html'
})
.otherwise(
{
    redirectTo : '/'
});