Angular UI Router not injecting footer into UI View

Question

http://plnkr.co/edit/i9qhqKZrbxUfsrAOKmMD

I have a basic hello world setup for a header/container/footer in AngularJs however I can't get the footer to load. The header/container is loading fine.

Here's my javascript:

angular.module('app', ['app.controllers', 'ui.router']).config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('root', {
            url: '',
            abstract: true,
            views: {
                'header': {
                    templateUrl: 'pages/header/header.html',
                    controller: 'HeaderController'
                },
                'footer': {
                    templateurl: 'pages/footer/footer.html'
                }
            }
        })
        .state('root.home', {
            url: '/',
            views: {
                'container@': {
                    templateUrl: 'pages/home/home.html',
                    controller: 'HomeController'
                }
            }
        })
        .state('root.about', {
            url: '/about',
            views: {
                'container@': {
                    templateUrl: 'pages/about/about.html'
                }
            }
        });

    $urlRouterProvider.otherwise('/');
});

angular.module('app.controllers', [])
    .controller('HeaderController', headerController)
    .controller('HomeController', homeController);

Here's my implementation on HTML:

<header ui-view="header">
</header>

<div ui-view="container">
</div>

<footer ui-view="footer">
</footer>

Changing them all to divs does not help.

There are no errors in Javascript console.

Header.html

<h1>Header</h1>

Home.html

<h1>Home</h1>

Footer.html

<h1>Footer</h1>

Page display:

Header

Home

Matt Way Matt Way · Accepted Answer · 2015-12-17T04:34:31

The reason it is not working is because of a small typo in your code. This definition:

'footer': {
    templateurl: 'pages/footer/footer.html'
}

should be:

'footer': {
    templateUrl: 'pages/footer/footer.html'
}

This is a great example of bad design (on the part of ui-router). They could have performed checks of validity on requested views if there is no template or controller. However, I think it more importantly shows the shortcomings of allowing objects to be passed to functions. If templateUrl was a parameter to a function, this sort of problem would never arise.

Angular UI Router not injecting footer into UI View

Header

Home

2 Answers