my first ui-router app - why nested views not loading?

Question

my app is here http://ui-router2-dwilbank68.c9.io/

I know ui-router is loading correctly because the NAMED views are functioning correctly (click About). The nested views list and paragraph, however, are not working, and I've looked over the code a dozen times for discrepancies. No errors in the Chrome console either.

here is the view I am trying to do the nesting in...

<div class="jumbotron text-center">
    <h1>The Homey Page</h1>
    <p>This page demonstrates nested views.</p>

    <a ui-sref='.list' class='btn btn-primary'>List</a>
    <a ui-sref='.paragraph' class='btn btn-primary'>Paragraph</a>
</div>

and here is my entire javascript content

var routerApp = angular
    .module('routerApp', ['ui.router']);

routerApp.config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/home');

    $stateProvider

        // HOME STATES AND NESTED VIEWS ========================================
        .state('home', {
            url: '/home',
            templateUrl: 'partial-home.html'
        })

        .state('home.list', {
            url: '/list',
            templateUrl: 'partial-home-list.html',
            controller: function($scope){
                $scope.dogs = ['Bernese','Husky','Goldendoodle'];
            }
        })

        .state('home.paragraph', {
            url: '/paragraph',
            template: 'I could use a taco right now'
        })

        // ABOUT PAGE AND MULTIPLE NAMED VIEWS =================================
        .state('about', {
            url: '/about',
            views: {
                '': {templateUrl: 'partial-about.html'},

                'columnOne@about': { template: 'Look I am a column' },

                'columnTwo@about': {
                    templateUrl: 'table-data.html',
                    controller: 'scotchController'
                }
            }
        });
});

routerApp
    .controller('scotchController', function($scope){
        $scope.message = 'test';
        $scope.scotches = [
        { name: 'Macallan 12', price: 50 },
        { name: 'Chivas Regal Royal Salute', price: 10000 },
        { name: 'Glenfiddich 1937', price: 20000 } ];
});

The url DOES change... but why do the templates not load??

Can we have a plnkr, your code looks right. Maybe i usually use ui-sref='home.list'. — Ivan Coronado
– Ivan Coronado, Commented Oct 1, 2015 at 7:52
Is this workable just like plunker? ide.c9.io/dwilbank68/ui-router2 The RUN button is at the top, and I've already provided the URL to see the live preview of the page... — dwilbank
– dwilbank, Commented Oct 1, 2015 at 7:58

Ivan Coronado · Accepted Answer · 2015-10-01 08:05:16Z

2

You probably missed <div ui-view></div> in your home view (partial-home.html)

answered Oct 1, 2015 at 8:05

Ivan Coronado

1,0188 silver badges15 bronze badges

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

1 Comment

dwilbank Over a year ago

You know, I was wondering, "This is weird... Why is there no spot for the child view to go?" And there it is... Thanks!

Collectives™ on Stack Overflow

my first ui-router app - why nested views not loading?

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related