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 :)

Answer 1

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}}'})")

Answer 2

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.