如何在除了首页以外的每个页面上显示导航栏,以便不必在需要的每个页面上附加导航栏文件?现在我已经在主应用程序布局中包含了导航栏,如何处理它以保持DRY呢?
演示(每个页面都有导航栏):
演示(每个页面都有导航栏):
var App = angular.module('app', ['ui.router']);
App.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'home.html'
})
.state('about', {
url: '/about',
templateUrl: 'about.html'
}).state('landingpage', {
url: '/landingpage',
templateUrl: 'landingpage.html'
});
$urlRouterProvider.otherwise('/home');
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<div ng-app="app">
<div ng-include="'navbar.html'"></div>
<div class="container">
<div ui-view></div>
</div>
<script type="text/ng-template" id="navbar.html"></script>
<script type="text/ng-template" id="home.html"></script>
<script type="text/ng-template" id="about.html"></script>
<script type="text/ng-template" id="landingpage.html"></script>
</div>