angularjs - 我如何避免重复或抽象页眉和页脚 Angular ui-router

Question

 var headerView = {
  templateUrl: 'views/header/header.html',
  controller: 'HeaderCtrl'
 };

var footerView = {
  templateUrl: 'views/footer/footer.html'
};
var myApp = angular.module('myApp', ['ui.router']);

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

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

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

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

        });

在上面的代码中重复包含页眉和页脚，因此我想避免重复包含页眉和页脚。我如何避免重复包含或抽象此页眉和页脚，我正在使用 Node 、web-pack、ui-router ..

Answer 1

您可以在 MainCtrl Controller 范围之外的主模板中添加页眉和页脚。