我怎样才能避免包含重复或抽象的页眉和页脚角度 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
                    }
                });

        });

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

Answer 1

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

Answer 2

拥有一个包含页眉和页脚模板的抽象状态，中间部分将作为 main 视图的占位符，这将根据您的 URL 进行更改。

HTML

<div class="container">
   <ui-view name="header"></ui-view>
   <ui-view name="content"></ui-view>
   <ui-view name="footer"></ui-view>
</div>

州

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

所以就状态而言，您将root 作为父状态。而first、second 和其他将是您的root 的子状态，显然共享共同的header 和footer。我们还将root 状态声明为abstract，因为没有人可以使用（导航到）抽象状态。