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?

Answer 1

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, eg 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

Angular UI-Router Nested View Not Displaying Page

Question

1 answers

solution1
3 ACCPTED 2015-08-11 10:45:56

Angular UI-Router Nested View Not Displaying Page

Question

1 answers

solution1 3 ACCPTED 2015-08-11 10:45:56

solution1
3 ACCPTED 2015-08-11 10:45:56