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视图的占位符，将根据您的网址进行更改。

<强> 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＆amp;其他将是您的root显然共享header＆amp; footer。我们还将root状态声明为abstract，因为没有人可以使用（导航到）抽象状态。

我怎样才能避免重复包含或抽象标题＆amp;页脚角度ui-router

2 个答案: