How to implement routing based on the $rootScope variable value - angularjs

Question

I have a requirement to implement a data collection "wizard" app, using AngularJS.
As the user progresses onto the next wizard page, I'm faced with a choice: a) to have each page partial have its own "Next" button, with hg-click explicitly calling the pre-defined next partial page or b) to have just one pair of "Next/Previous" buttons and implement navigation in a more dynamic way, by storing the curtest wizard step in a $rootScope.
My question: If I chose option "b", how what would be the way to implement dynamic routing based on the $rootScope.currentWizardStep value?
Or, maybe, there is a better way to do all this. If You know of such as way, please share :)

Answer 1

You're looking to implement $routParams.
This allows you to name segments of a URL, which then turn into a key/value pair.
from the docs:
// Given:
// URL: http://server.com/index.html#/Chapter/1/Section/2?search=moby
// Route: /Chapter/:chapterId/Section/:sectionId
//
// Then
$routeParams ==> {chapterId:1, sectionId:2, search:'moby'}
Then within your controller, you just have to check the URL to determine which page they are on. Using the example given from the docs, if you wanted to identify which chapter they are on, you would do:
var chapter = $routeParams.chapterId;
This would still allow you to keep just one set of 'next/previous' buttons. I don't know how you're incrementing pages (different names, page numbers, etc). But it should be fairly minor to keep track of what pages are next/previous. Especially if you had a master array of all the pages & the order that you expect them to be in.
var wizardPages = {
one: {previous: 'start.html', current: 'one.html', next: 'two.html'},
two: {previous: 'one.html', current: 'two.html', next: 'three.html'},
three: {previous: 'two.html', current: 'three.html', next: 'end.html'}
};
$scope.next = function(){
var current = $routeParams.page;
$scope.template = wizardPages[current].next;
};
$scope.previous = function(){
var current = $routeParams.page;
$scope.template = wizardPages[current].previous;
};
And then your HTML
<div class="" ng-include="template"></div>
And wherever you configure your routes:
$routeProvider
.when('/wizard', {templateURL: 'view/wizard.html'})
.when('/wizard/:page', {templateURL: 'view/wizard.html'});
Your URL would look something like: www.example.com/wizard/one
This would allow you to continue using partials (which would be loaded into your ng-includes)

Answer 2

Populating the $rootScope with statefull data is always a bad idea. Depending on how big your page will be (or to be more precisely: how many subpages you will have) I would even recommend to not use routing at all, but work with the ng-show-Directive and a single Controller, incrementing a value representing the current subpage.
Something like this:
<div ng-show="pageNum == 1">
<h1>First Page</h1>
</div>
<div ng-show="pageNum == 2">
<h1> Second Page</h1>
</div>
<input type="button" ng-click=pageNum++" value="Next Page"/>
Of course this is only possible if you dont need render the Subpages serverside.