javascript-如何使用ui路由器状态在Angularjs中编写常见的页眉和页脚

我正在使用ui路由器状态.我有两个不同的控制器,将来可能还会扩展.如何编写默认和通用标头页脚.

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

myApp.controller('MainCtrl', function($scope) {});

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

    // default route
    $urlRouterProvider.otherwise("/first");

    // ui router states
    $stateProvider
        .state('first', {
            url: "/first",
            views: {
                header: {
                    template: '<h1>First header</h1>',
                    controller: function($scope) {}
                },
                content: {
                    template: '<p>First content</>',
                    controller: function($scope) {}
                },
                footer: {
                    template: '<div>First footer</div>',
                    controller: function($scope) {}
                }
            }
        })
        .state('second', {
            url: "/second",
            views: {
                header: {
                    template: '<h1>Second header</h1>',
                    controller: function($scope) {}
                },
                content: {
                    template: '<p>Second content</>',
                    controller: function($scope) {}
                },
                footer: {
                    template: '<div>Second footer</div>',
                    controller: function($scope) {}
                }
            }
        });

});

Jsfiddle：http://jsfiddle.net/karthikreddy/b7cnszdf/

解决方法:

请看这个演示：http://jsfiddle.net/tkf954a5/

您可以像这样定义页脚和页眉：

  var header = {
       template: '<h1>Im Header</h1>',
       controller: function($scope) {}

  }

然后在您的州使用它：

 .state('first', {
            url: "/first",
            views: {
                header: header,
                content: {
                    template: '<p>First content</>',
                    controller: function($scope) {}
                },
                footer: footer
            }
        })