javascript - Angular UI Router 未将页脚注入(inject) UI View

Question

http://plnkr.co/edit/i9qhqKZrbxUfsrAOKmMD

我在 AngularJs 中有一个基本的 header/container/footer 设置，但是我无法加载页脚。 header /容器加载正常。

这是我的 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 控制台中没有错误。

标题.html

<h1>Header</h1>

首页.html

<h1>Home</h1>

页脚.html

<h1>Footer</h1>

页面显示:

标题

首页

Answer 1

它不起作用的原因是您的代码中存在一个小拼写错误。这个定义:

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

应该是:

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

<小时/>

这是糟糕设计的一个很好的例子(就 ui-router 而言)。如果没有模板或 Controller ，他们可以对请求的 View 执行有效性检查。然而，我认为它更重要地显示了允许将对象传递给函数的缺点。如果 templateUrl 是函数的参数，则永远不会出现此类问题。