Angularjs nested routing and loading multiple pages within a view

Question

I'm setting up an angularjs app that has multiple vertical columns that display on the same page and based on what item is clicked a new or different column will expand.

Here's my jsbin example.

How do you recommend setting this up in angular? Should this be setup using ui-router with nested children or do you have a better suggestion? Examples are appreciated.

Thanks :)

biofractal · Accepted Answer · 2014-04-24 09:14:34Z

4

I think this is a great example of a ui-router nested state-machine.

I have knocked up an example of kind of the ui-router state configuration you might want and examples of the corresponding controllers that would expose the data to the appropriate scopes.

Please note that this is definitely not the finished code structure, but it should give you a good idea of the syntax and how to generally implement nested ui-router states with resolved data etc.

The code is all coffeescript. If you need it in javascript, here is a transpiler for you. The template snippet example is Jade, here is a jade to html converter

UI-Router Config

angular
.module 'app', ['ui.router']
.config ($stateProvider) ->
    $stateProvider

        .state 'root',
            url:'/'
            templateUrl: "root.html"
            controller: 'rootCtrl'
            resolve:
                items:(dataService) -> dataService.getPrimary

        .state 'root.primary',
            url:'/{primary}'
            templateUrl: "primary.html"
            controller: 'primaryCtrl'
            resolve:
                items:(dataService, $stateParams) -> 
                    dataService.getSecondary $stateParams.primary

        .state 'root.primary.secondary',
            url:'/{secondary}'
            templateUrl: "secondary.html"
            controller: 'secondaryCtrl'
            resolve:
                items:(dataService, $stateParams) -> 
                    dataService.getTertiary $stateParams.secondary

        .state 'root.primary.secondary.tertiary',
            url:'/{tertiary}'
            templateUrl: "tertiary.html"
            controller: 'tertiaryCtrl'
            resolve:
                content:(dataService, $stateParams) -> 
                    dataService.getContent $stateParams.tertiary

Controllers

angular
.module 'app'
.controller 'rootCtrl', ($scope, items) ->
    $scope.primaryItems = items.data

angular
.module 'app'
.controller 'primaryCtrl', ($scope, items) ->
    $scope.secondaryItems = items.data

angular
.module 'app'
.controller 'secondaryCtrl', ($scope, items) ->
    $scope.tertiaryItems = items.data

angular
.module 'app'
.controller 'tertiaryCtrl', ($scope, content) ->
    $scope.content = content.data

root.html

ul
    li(ng-repeat="item in primaryItems track by $index")
        a(ui-sref="root.primary({ primary: '{{item}}'})")

primary.html

ul
    li(ng-repeat="item in secondaryItems track by $index")
        a(ui-sref="root.primary.secondary({ secondary: '{{item}}'})")

edited Apr 24, 2014 at 9:14

answered Apr 23, 2014 at 9:00

$biofractal's user avatar$

biofractal

19.2k12 gold badges72 silver badges119 bronze badges

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

6 Comments

Jeffrey Over a year ago

Interesting. How could the states be loaded into the root.html template and swapped out of the other templates based on a different parent being clicked.

biofractal Over a year ago

I have updated the code to make it more generic. The initial entry url will determine the initial state although regardless you will see the primary items because the root templates url='/' loads them so they will always be available by default. The ui-sref attrib transitions to the appropriate state when the user click on a link (passing in the value of the clicked item as a state param). The html templates will need to nested via <div ui-view />

Jeffrey Over a year ago

Added the code to plnkr, but couldn't get the resolve working.

biofractal Over a year ago

Have you written the dataService yet? You will need to write this service to supply the actual data values you need. The code above is for illustration only, it is not intended to actually work as it stands but I hope it will give you an idea of how to approach the problem. Good luck.

biofractal Over a year ago

@Jeffrey Did my answer help you? I would appreciate you accepting the answer or perhaps an upvote just for the effort :-) Thanks.

|

SleepyProgrammer · Accepted Answer · 2014-04-22 19:54:20Z

0

Ui-Router makes sense to me...one of the advantages being that it sort of wraps up specifying the controller and everything nicely so you can add the interactive elements to the next column.

If that type of thing isn't important and you just want content, tabs could easily be used.

answered Apr 22, 2014 at 19:54

SleepyProgrammer

4531 gold badge5 silver badges15 bronze badges

Collectives™ on Stack Overflow

Angularjs nested routing and loading multiple pages within a view

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related