Angular UI-Router: nested views

Question

I have two col layout with header and footer. Header has page navigation (GetStarted, Component). Of the 2 columns, one is for sidenav and other is for main content. When "GetStarted" nav is active, sidenav is populated with respective links (overview, examples) When "Component" nav is active, sidenav is populated with respective links (checkbox, alert)

Upon clicking "Overview" link area is populated with its data

 
      Default
      Disabled
    

    
      
        
        
          
            Default
                Checkbox Label

Main content has 2 nav tabs for checbox states (default & disable). By clicking the "default" its content must be displayed and same goes for disabled. I'm new to angular and I kinda got first level nested view working. But couldn't the whole thing working. here is the code sample

index.html

        
        
          
            
              
              
            
            
              
                Get Started
                Components

component.html

    
        
          
              
                
                    COMPONENTS
                
                
                    {{item.name}}

app.js

(function(){
    var mendouiApp = angular.module('mendouiApp', ['ui.router', 'ui.router.stateHelper']);

    mendouiApp.constant('COMPONENTS_LIST', {
        name: 'sidenav',
        templateUrl: '../components/components.list.html',
        abstract: true,
        children: [{
            name: 'alerts',
            url: '/alerts',
            templateUrl: '../components/alerts/alerts.html'
        }]
    });

    mendouiApp.config(function($stateHelperProvider, $urlRouterProvider, $locationProvider, $urlMatcherFactoryProvider, COMPONENTS_LIST) {
        $urlMatcherFactoryProvider.strictMode(false);
        $urlRouterProvider.otherwise('/home');
        $locationProvider.hashPrefix('!');
        $stateHelperProvider
            .state('home', {
                url: '/home',
                templateUrl: '../gettingstarted.html',
                controller: 'getStartedController'
            })
            .state('layouts', {
                url: '/layouts',
                templateUrl: '../layouts.html'
            })
            .state('screenpatterns', {
                url: '/screenpatterns',
                templateUrl: '../screenpatterns.html'
            })
            .state('yogi', {
                url: '/yogi',
                templateUrl: '../yogi.html'
            })
            .state('components', {
                url: '/components', 
                templateUrl: '../components.html',
                controller: 'componentsController'
            })
            .state(COMPONENTS_LIST, {
                keepOriginalNames: true
            })
            .state('components.button', {
                url: '/button',
                templateUrl: '../components/button/button.html'
            })          .state('components.checkbox', {
                url: '/checkbox',
                templateUrl: '../components/checkbox/checkbox.html'
            })
            .state('components.forms', {
                url: '/forms',
                deepStateRedirect: true,
                sticky: true,
                views: {
                    '': { templateUrl: '..forms.html' },
                    'inline@components.forms': {
                        templateUrl: '../components/forms/form-inline/forminline.html'
                    },
                    'default@components.forms': {
                        templateUrl: '../components/forms/form-default/formdefault.html'
                    },
                    'multicolumn@components.forms': {
                        templateUrl: '../components/forms/form-multicolumn/formmulticolumn.html'
                    }
                }           
            });
            // use the HTML5 History API
            $locationProvider.html5Mode({
              enabled: true,
              requireBase: false
            });
    });

    mendouiApp.controller('componentsController', ['$scope', '$state', 'sideNavService', function($scope, $state, sideNavService, COMPONENTS_LIST){
        $scope.componentsList = sideNavService.components;
        $scope.componentsnav = COMPONENTS_LIST.children;
        $scope.go = function(tab) {
            $state.go(tab.name);
        }
    }]);
    mendouiApp.controller('getStartedController', ['$scope', '$state', 'sideNavService', 'fixedSideNavService', function($scope, $state, sideNavService, fixedSideNavService ){
        $scope.getstartedList = sideNavService.getstarted;
    }]);

    /*** This is for the external url reference ***/
    mendouiApp.run(function($rootScope, $state, $stateParams, $window, fixedSideNavService, copyToClipBoardService) {
        $rootScope.$on('$stateChangeStart',
            function(event, toState, toParams, fromState, fromParams, $state, $stateParams) {
                if (toState.external) {
                    event.preventDefault();
                    $window.open(toState.url, '_self');
                }
        });
        $rootScope.$on('$viewContentLoaded', function(event){
            fixedSideNavService.fixedsidenav();
            copyToClipBoardService.copytoclipboard();
        });

        $rootScope.$state = $state;
        $rootScope.$stateParams = $stateParams;
        $state.transitionTo('home');
    });
    })();

service.js

angular.module('mendouiApp').service('sideNavService', function() {
  return {
    "getstarted" : [
        {
            "name" : "Overview",
            "link" : "home.overview"
        }
        {
            "name" : "Summary",
            "link" : "home.overview"
        }

    ],
    "components" : [
        {
            "name" : "Alerts",
            "link"  :"components.alert"
        },
        {
            "name" : "Button",
            "link"  :"components.button"
        },
        {
            "name" : "Button Groups",
            "link"  :"components.buttongroup"
        },
        {
            "name" : "Button Icons",
            "link"  :"components.buttonicons"
        },
        {
            "name" : "Checkbox",
            "link"  :"components.checkbox"
        },
        {
            "name" : "Datepicker",
            "link"  :"components.datepicker"
        },
        {
            "name" : "Forms",
            "link" : "components.forms"
        }

    ]
 };
});

Canastro · Accepted Answer

Your question was a bit messy, but after a while playing with I could understand I made this fiddle: http://jsfiddle.net/canastro/c4kt2myc/2/ I hope it works as you were expecting.

The main thing to focus on here is:

.state("root.components.button", {
    url: '/components/button',
    views: {
        'main@': {
            template: `
                
                    default
                    disabled
                    
                
            `
        }
    }
})
.state("root.components.button.default", {
    url: '/components/button/default',
    views: {
        'buttonsContent@root.components.button': {
            template: 'root.components.button.default'
        }
    }
})
.state("root.components.button.disabled", {
    url: '/components/button/disabled',
    views: {
        'buttonsContent@root.components.button': {
            template: 'root.components.button.disabled'
        }
    }
})

In the first level you have a abstract route so you can always have your basic layout present.

Then in the Started / Components routes, you load content into the main and side ui-views.

In all of the Started and Component child routes you just override the main views.

And finally, in the last level you need to say you want to fill the content of a ui-view created in the previous state, by doing something like VIEWNAME@STATENAME.

Angular UI-Router: nested views

Answers (1)

Related Questions