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) {}
                }
            }
        });

});

var myApp=angular.module（'myApp'，['ui.router']）；
控制器（'MainCtrl'，函数（$scope）{}）；
myApp.config（函数（$stateProvider，$urlRouterProvider）{
//默认路由
$urlRouterProvider。否则（“/first”）；
//用户界面路由器状态
$stateProvider
.州（'第一'{
url:“/first”，
观点：{
标题：{
模板：“第一个标题”，
控制器：函数（$scope）{}
},
内容：{
模板：“第一个内容”，
控制器：函数（$scope）{}
},
页脚：{
模板：“第一个页脚”，
控制器：函数（$scope）{}
}
}
})
.州（'第二'{
url:“/秒”，
观点：{
标题：{
模板：“第二个标题”，
控制器：函数（$scope）{}
},
内容：{
模板：“第二个内容”，
控制器：函数（$scope）{}
},
页脚：{
模板：“第二个页脚”，
控制器：函数（$scope）{}
}
}
});
});

---

jsiddle:

我建议您将视图（html）和控制器代码放在单独的文件中，以提高可读性

Ui路由器允许您创建嵌套状态。这样，您可以创建一个包含页眉和页脚的基本状态，然后将所有yout状态添加为嵌套状态

请参阅：了解更多信息

它看起来像这样：

.state('base',{
    url: '',
    views: {
        'header': {
             controller: 'HeaderCtrl',
             templateUrl: 'views/header.html'
        },
        'main': {
            template: '<ui-view/>'
        },
        'footer': {
            controller: 'FooterCtrl',
            templateUrl: 'views/footer.html'
        }
    }
})

.state('base.first', {
    url: '/first',
    controller: 'FirstCtrl',
    templateUrl: 'first.html'
})

.state('base.first', {
    url: '/second',
    controller: 'SecondCtrl',
    templateUrl: 'second.html'
})

.state（'base'{
url:“”，
观点：{
“标题”：{
控制器：“HeaderCtrl”，
templateUrl:'views/header.html'
},
“主要”：{
模板：“”
},
“页脚”：{
控制器：“FooterCtrl”，
templateUrl:'views/footer.html'
}
}
})
.state（'base.first'{
url:“/first”，
控制器：“FirstCtrl”，
templateUrl:'first.html'
})
.state（'base.first'{
url:“/秒”，
控制器：“SecondCtrl”，
templateUrl:'second.html'
})

编辑 如果不想使用嵌套状态，可以将视图和控制器放在单独的文件中，并将它们包含在创建的每条管线上。而不是有整个代码在那里，它将只是一个字符串

请查看此演示：

您可以定义页脚和页眉，如下所示：

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

  }

var头={
模板：“Im头”，
控制器：函数（$scope）{}
}

然后在你所在的州使用它：

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

.state（'first'{
url:“/first”，
观点：{
标题：标题，
内容：{
模板：“第一个内容”，
控制器：函数（$scope）{}
},
页脚：页脚
}
})

谢谢Jasper，我也尝试过同样的方法，但它不起作用，请您编写Jsfuddle并发送给我。@JamesVo我看看今晚能做些什么。如果您不打算使用大量的路由和标题可能会更改的情况，那么在单独的文件中定义em的解决方案（如sylwester的答案）可能是更好的选择。谢谢sylwester。是否有任何方法可以为所有控制器加载公共页眉和页脚。@JamesVo如果您想为所有控制器加载公共页眉和页脚，请将dom结构更改为“OK”，谢谢。如何为标题加载示例指令。