Angular UI-Router nested views

Question

I am trying to get nested views to work in which after logging in it sends you to in.html from there all links link to a ui-view within in.html. Currently all links go to a "new" page

index.html

<!-- more HTML -->
<body ng-controller="MainController as main">
<!--<div id="loading"><span>Loading</span></div>-->

<div ui-view="default"></div>
</body>
<!-- more HTML -->

in.html

<a ui-sref="online">Online Users</a>
<div ui-view="main"></div>

app.js routes

var $td = $config.TPL_DIR;

$stateProvider
    .state('auth', {
        url: '/auth',
        views: {
            "default": {
                controller: 'AuthController as auth',
                templateUrl: $td + 'login.html'
            }
        }
    })
    .state('loggedin', {
        url: '/in',
        views: {
            "default": {
                templateUrl: $td + 'in.html'
            }
        }
    })
    .state('online', {
        url: '/online',
        views: {
            "main": {
                controller: 'OnlineController as online',
                templateUrl: $td + 'online.html'
            }
        }
    });

wmaxlees · Accepted Answer · 2015-07-04 02:48:41Z

1

Try making some subviews and then changing the ui-view from in there. Something like

.state('loggedin.another_view', {
    url: '',
    views: {
        "main": {
            templateUrl: $td + 'partial.html'
        }
    }
})

Since loggedin is the parent view, when the router looks for main, it will look within the loggedin context for the view. It will load partial.html into your view.

answered Jul 4, 2015 at 2:48

wmaxlees

6051 gold badge5 silver badges22 bronze badges

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

Comments

Ian · Accepted Answer · 2015-07-04 02:45:27Z

0

Changed state to loggedin.online

.state('loggedin.online', {
        url: '/online',
        views: {
            "main": {
                controller: 'OnlineController as online',
                templateUrl: $td + 'online.html'
            }
        }
    });

Change link to

<a ui-sref=".online">Online Users</a>
<div ui-view="main"></div>

answered Jul 4, 2015 at 2:45

Ian

3,7064 gold badges32 silver badges50 bronze badges

Collectives™ on Stack Overflow

Angular UI-Router nested views

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related