Nested ui-router state without nested view?

Question

I\'m wondering if it\'s possible to have a nested state without a nested view. Suppose I have this setup:

App.config(function($stateProvider, $urlRouterProvider)         


        

Answer 1

Sure, just because a state shares part of the url doesn't mean it has to be a parent/child relationship. Just set the us state's url to /about/us and don't give it a parent.

App.config(function($stateProvider, $urlRouterProvider) {
    //
    //
    // Now set up the states
    $stateProvider
    .state('index', {
        url: "/index",
        templateUrl: "views/home.html",
        controller: "MainController",
        ncyBreadcrumb: {
            label: 'Home'
        }
    })
    .state('About', {
        url: "/about",
        templateUrl: "views/about.html",
        controller: "AboutController",
        ncyBreadcrumb: {
            label: 'About',
            parent: 'index'
        }
    })
    .state('us', {
        url: "/about/us",
        templateUrl: "views/us.html",
        controller: "UsController",
        ncyBreadcrumb: {
            label: 'Us'
        }
    })
    //
    // For any unmatched url, redirect to /home
    $urlRouterProvider.otherwise("/index");
});