Angular UI路由器没有将页脚注入UI视图

Question

http://plnkr.co/edit/i9qhqKZrbxUfsrAOKmMD

我在AngularJs中为header/container/footer设置了一个基本的hello world设置但是我无法加载页脚。标题/容器正在加载。

这是我的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);

这是我在HTML上的实现：

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

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

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

将它们全部更改为div无济于事。

Javascript控制台中没有错误。

了header.html

<h1>Header</h1>

Home.html中

<h1>Home</h1>

Footer.html

<h1>Footer</h1>

页面显示：

标题

主页

Answer 1

它无法正常工作的原因是因为代码中存在小错误。这个定义：

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

应该是：

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

这是糟糕设计的一个很好的例子（在ui-router部分）。如果没有模板或控制器，他们可以对请求的视图执行有效性检查。但是，我认为更重要的是显示了允许将对象传递给函数的缺点。如果templateUrl是函数的参数，则永远不会出现这种问题。

Answer 2

更新了plunkr。

将templateurl替换为templateUrl。