relative views in a nested route using Angular 1.5 components

Question

I am having trouble using relative named views in a nested route using:

Angular 1.5.8 & angular-ui-router 1.0.0-beta.2

In my 'layout.dashboard' state below, I have my views object with keys 'certs' and 'activity'. Each view is linked to a super basic component with an empty controller and a template with some simple text to display....However, the components in my view object are not displaying.

According to the docs here, I should be able to go:

<div ui-view='certs'></div> //Should be in parent -> dashboard.tmpl.html

But neither of these components are showing up. Where am I going wrong?

app.js

$stateProvider
    .state('login', {
    url: '/login',
        param: {error: null},
        component: 'login'
    })
    .state('layout', {
        abstract: true,
        component: 'layout',
        resolve: {
            User: function (AuthorizeService, $state) {
                    return AuthorizeService.isAuthorized()
                            .catch(function(){
                                 $state.go('login', {error: 'Please Login'});
                            });
            },
             Organizations : function(OrganizationService, UserService){
                 return OrganizationService.getOrgs().then(function(result){
                     OrganizationService.setCurrentOrg(result.data[0]);
                     return result.data;
                 })
             }
        }
    })
    .state('layout.dashboard', {
        url: '/dashboard',
        component : 'dashboard',
        resolve : {
            certifications: function (OrganizationService) {
                return OrganizationService.getCurrentOrg().then(function(result) {
                    return OrganizationService.getCertifications(result);
                });
            }
        },
        /******THESE ARE NOT DISPLAYING*********/
        views : { 
            certs : { component: 'certificationsList' },
            activity: { component: 'activityList' }
        }
    })

layout.tmpl.html

<div class="container-fluid">

        <div class='header-bar'>

            <div class='header-bar_logo'>
                <a ui-sref="layout"><img src='assets/images/app-logo.png' alt='' /></a>
            </div>

            <div class='header-bar_user'>
                <div class="avatar">
                    <img ng-src="{{dash.user.avatar}}" class="profile-photo">
                </div>
                <div class="info">
                    <h4 class="name">{{dash.user.name}}</h4>
                    <p>{{dash.user.points}}</p>
                </div>
            </div>

        </div>

        <section id="main">
            <div class='main-sidebar'>

                <!-- Browse Certifications, Browse Courses , Account, -->
                <div ui-sref="layout.dashboard" ui-sref-active="active" class="main-menu-item">
                    <h3><i class="fa fa-certificate"></i>Certifications</h3>
                </div>
                <div ui-sref="dashboard.courses" ui-sref-active="active" class="main-menu-item">
                    <h3><i class="fa fa-book"></i>Courses</h3>
                </div>
                <div ui-sref="dashboard.users" ui-sref-active="active" ng-class="{'disabled': !dash.isAdmin()}" class="main-menu-item">
                    <h3><i class="fa fa-user"></i>Users</h3>
                </div>
                <div ui-sref="dashboard.analytics" ui-sref-active="active" ng-class="{'disabled': !dash.isAdmin()}" class="main-menu-item">
                    <h3><i class="fa fa-line-chart"></i>Analytics</h3>
                </div>
                <div ui-sref="dashboard.account" ui-sref-active="active" class="main-menu-item">
                    <h3><i class="fa fa-cog"></i>Account</h3>
                </div>

            </div>

            <div class='main-content-wrapper'>
                <alert-list></alert-list>
                <ui-view></ui-view>
            </div>
        </section>

    </div>

dashboard.tmpl.html

    <div class="dashboard-wrapper">
        <h1>Overview</h1>
        <div class="header">
            <div class="header-content">
            <h3>Header News Feed?</h3>
            </div>
        </div>
        <div class="dashboard-content">
            <div class="left-column">
                <div ui-view="certs"></div>
            </div>
            <div class="right-column">
                <div ui-view="activity"></div>
            </div>
        </div>
    </div>

calbear47 calbear47 · Accepted Answer · 2016-09-15T16:44:39

Problem solved. At the very end of the documentation, there is this bit. This needs more attention, so here it is:

If a state has a views object, any state-level view properties (Ng1ViewDeclaration) are ignored. Therefore, if any view for a state is declared in the views object, then all of the state's views must be defined in the views object. The state declaration must not have any of the following fields:

component
bindings
resolveAs
template
templateUrl
templateProvider
controller
controllerAs
controllerProvider

In other words, this in NOT Valid:

 .state('layout.dashboard', {
    url: '/dashboard',
    component : 'dashboard',
    resolve : {
        certifications: function (OrganizationService) {
            return OrganizationService.getCurrentOrg().then(function(result) {
                return OrganizationService.getCertifications(result);
            });
        }
    },
    /*****Because a view object exists, component is ignored*****/
    views : { 
        certs : { component: 'certificationsList' },
        activity: { component: 'activityList' }
    }
})

Here is the solution:

    .state('layout.dashboard', {
        url: '/dashboard',
        resolve : {
            certifications: function (OrganizationService) {
                return OrganizationService.getCurrentOrg().then(function(result) {
                    return OrganizationService.getCertifications(result);
                });
            }
        },
        views :
                {
                "" : {component: 'dashboard'},
                "[email protected]" : { component: 'certificationsList' },
                "[email protected]" : { component: 'activityList' }
                }
    })

relative views in a nested route using Angular 1.5 components

1 Answers