Angular UI-Router Nested View Not Displaying Page

Question

I have implemented UI-Router in my application but I'm having a problem with a nested route. My index.html page looks like;

<body>
    <!-- Navigation code -->

    <!-- Content from the template -->
    <div ui-view></div>

    <!-- Footer -->

    <!-- Application Scripts -->
</body>

My Angular ui-route code is;

(function () {
    'use strict';

    var app = angular.module('rbApp', ['ngAnimate', 'ui.router', 'ui.bootstrap']);

    app.config(["$stateProvider", "$urlRouterProvider", function ($stateProvider, $urlRouterProvider) {
        $urlRouterProvider.otherwise("/");

        $stateProvider
        .state("home", {
            url: "/",
            templateUrl: "/App/WebSite/home.html",
            controller: "homeController as homeVm"
        })
        .state("programs", {
            url: "/programs",
            templateUrl: "/App/WebSite/programs.html",
            controller: "programsController as programVm"
        })
        .state("programs.complete", {
            url: "/complete",
            templateUrl: "/App/WebSite/programsComplete.html"
        })
        .state("articles", {
            url: "/articles",
            templateUrl: "/App/WebSite/articles.html",
            controller: "articleController as articleVm"
        })
    }]);

    app.run(['$rootScope', function ($rootScope) {
        $rootScope.$on('$locationChangeStart', function (event, newUrl, oldUrl) {
            console.log('Location change: %s --> %s', oldUrl, newUrl);
        });
    }]);

})();

When I select the "programs" route the page is displayed correctly and the "app.run" code above updates the console log with;

Location change: http://localhost:50321/#/ --> http://localhost:50321/#/programs

On the programs page I have an image within an anchor tag as follows;

    <div class="col-md-3 hidden-sm hidden-xs">
        <a ui-sref="programs.complete"><img class="img-thumbnail img-responsive" src="/Images/Programs/Program01Small.jpg" /></a>
    </div>

When the image is clicked the console log displays;

Location change: http://localhost:50321/#/programs --> http://localhost:50321/#/programs/complete

So it appears the routes are behaving as expected. The only problem is the "programsComplete.html" template is not displayed, the browser continues to display the "programs.html" template.

I have checked the console log but no errors are displayed and currently the "programsComplete.html" only contains a <h1> tag and text so I can confirm the template is being loaded.

Can anyone advise why this would not be loading the template?

Radim Köhler · Accepted Answer · 2015-08-11 10:45:56Z

3

It seems that the parent template programs.html is just missing for its child. Be sure that this tempalte programs.html contains unnamed view target

<div ui-view="">

Each child is inserted into its parent. In case we want child to replace parent, we have to use absolute name, and in this case target the index.html like this:

.state("programs.complete", {
    url: "/complete",
    views : {
      '@' : {
        templateUrl: "/App/WebSite/programsComplete.html"
       }
    }
})

while this naming convention could be weird: views : { '@' : ..., it is just absolute name:

View Names - Relative vs. Absolute Names

Behind the scenes, every view gets assigned an absolute name that follows a scheme of viewname@statename, where viewname is the name used in the view directive and state name is the state's absolute name, e.g. contact.item. You can also choose to write your view names in the absolute syntax.

so '@' means unnamed view in the unnamed state === root state

answered Aug 11, 2015 at 10:45

Radim Köhler

124k48 gold badges243 silver badges343 bronze badges

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

1 Comment

Ray Brack Over a year ago

Thanks @radim this steered me in the right direction. My problem was that I was confused about how nested routes work. Turns out I should have been using a standard route instead.

Collectives™ on Stack Overflow

Angular UI-Router Nested View Not Displaying Page

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related