Angularjs - change templates without changing url

Question

new to Angular and JS so my jargon may be off.

Within a certain section of a page I would like to load in different templates depending on the user clicks without changing the URL path. I know how to use $routeProvider with ng-view but that requires a URL change to load the related template.

I would also like to add a back link within this specific section so the user can travel back a step.

Any ideas? I couldn't find any questions similar to mine but I may be searching with the incorrect terms. Any help or suggestions are greatly appreciated.

Regards

@KalhanoToressPamuditha I haven't but that looks like the solution. Thanks. — Brad Walker
– Brad Walker, Commented Sep 12, 2014 at 7:55

Rickard Staaf · Accepted Answer · 2014-09-11 12:02:18Z

And for the back button, you would have to keep a history array with past clicks/links and push pop from that as you click and click back. The "complete" solution would look similar to:

index.html

<html ng-app="app">
...
<div ng-controller="myController">

  <button ng-click="setCurrentView('tem1')">Template 1</button>
  <button ng-click="setCurrentView('tem2')">Template 2</button>
  <button ng-click="setCurrentView('tem3')">Template 3</button>

  <div ng-include="tem1.html" ng-show="currentView==tem1"></div>
  <div ng-include="tem2.html" ng-show="currentView==tem2"></div>
  <div ng-include="tem3.html" ng-show="currentView==tem3"></div>

  <button ng-click="goBack()">Back</button>

</div>
...
</html>

app.js

angular.module('app',[]).controller('myController',['$scope',function($scope){
  $scope.currentView='tem1';
  var history=[];

  $scope.setCurrentView=function(view){
    history.push($scope.currentView);        
    $scope.currentView=view;
  }

  $scope.goBack=function(){
    $scope.currentView=history.pop();
  }
}]);

That's really helpful, if I had more rep I'd up-vote this. Thanks.

Cathal · Accepted Answer · 2014-09-11 11:10:01Z

0

I'd suggest using ng-include. This allows you to include chunks of html code from another location. You could then use ng-show/hide to display the desired piece or ng-if if you would prefer that it is left out of the dom if not required

answered Sep 11, 2014 at 11:10

Cathal

1,8001 gold badge18 silver badges32 bronze badges

Collectives™ on Stack Overflow

Angularjs - change templates without changing url

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related