How to dynamically build pages in angular js

Question

I have the following problem:

I have an object, it is representing a list of "pages" and "quests" whithin them

  <div ng-repeat='page in pages' ng-show='page.show'>
       ....
  </div>

Now, when i render them, i did ng-show on, for example page 1, and then when user click a next button, the ng-shows shows the next page.

That was "ok" till now, but now i need something like this:

I need this pages to be routes.. like if my site is www.mysite.com/pages/

than page one will be represented this way www.mysite.com/pages/#1

and the reason is that when a user clicks "back" i want to use history.js to let the user go back to where he came from...

How should i tackle this? where should i start?

CrazyGeek · Accepted Answer · 2014-11-20 07:55:12Z

3

Its pretty interesting to generate dynamic pages and keeping stack of routing. So you must look into this ngDynamicRouting. What it does is simplify your code such as you don't need to setup new routes for new pages. Here we go..

Config
First you have to specify generic route

$routeProvider.when('pages/:pageNumber', { templateUrl: 'partials/blank.html', controller: PagesController });

Controller

function PagesController($scope, $http, $route, $routeParams, $compile) {
    // Here I am assuming you are having list of pages in pages array.
    //make sure you validate the pageNumber some where. 
    $route.currentPage = $scope.pages[$routeParams.pageNumber];
}
PagesController.$inject = ['$scope', '$http', '$route', '$routeParams', '$compile'];

index.html

<div ng-show="currentPage">

Let me know if it fixes your problem. if not than try to provide me a plunker or fiddle.

Thanks

edited Nov 20, 2014 at 7:55

answered Nov 20, 2014 at 7:13

CrazyGeek

3,4572 gold badges26 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to dynamically build pages in angular js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related