web-dev-qa-db-ja.com

ui-routerを使用して特定のページにのみナビゲーションバーを添付するにはどうすればよいですか？

ランディングページを除くすべてのページにナビゲーションバーを表示して、必要な各ページにナビゲーションバーファイルを添付する必要がないようにするにはどうすればよいですか？これで、メインアプリのレイアウトにナビゲーションバーを同封しました。ドライに保つためにどのように処理する必要がありますか？

デモ（各ページにナビゲーションバー付き）：

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">
    <nav class="navbar navbar-inverse" role="navigation">
      <div class="navbar-header">
        <a class="navbar-brand" ui-sref="landingpage">LandingPage</a>
      </div>
      <ul class="nav navbar-nav">
        <li><a ui-sref="home">Home</a></li>
        <li><a ui-sref="about">About</a></li>
        <li ng-hide="signedIn()"><a href="/login">Log In</a></li>
        <li ng-show="signedIn()"><a ng-click="logout()">Log Out</a></li>
      </ul>
    </nav>
  </script>

  <script type="text/ng-template" id="home.html">
    <h1>The Homey Page</h1>
  </script>

  <script type="text/ng-template" id="about.html">
    <h1>The About Page</h1>
  </script>

  <script type="text/ng-template" id="landingpage.html">
    <h1>Landing Page</h1>
    <a ui-sref="home">Home</a>
  </script>
</div>
javascriptangularjstwitter-bootstrapangular-ui-routerangularjs-ng-include
14
luzny

<div ui-view name="nav"></div>のような名前付きビューを作成し、状態ごとのビューごとにtemplateUrlを設定しました。 landingpage状態の場合、navビューにtemplateUrlを指定しないでください。そうすると、ナビゲーションバーがレンダリングされません。

更新：landingpage状態ではなくhomeで非表示にします。

var App = angular.module('app', ['ui.router']);
App.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('home', {
      url: '/home',
      views: {
        nav: {
          templateUrl: 'navbar.html'
        },
        content: {
          templateUrl: 'home.html'
        }
      }
    })
    .state('about', {
      url: '/about',
      views: {
        nav: {
          templateUrl: 'navbar.html'
        },
        content: {
          templateUrl: 'about.html'
        }
      } 
    }).state('landingpage', {
      url: '/landingpage',
      views: {
        content: {
          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 ui-view name="nav"></div>

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

  <script type="text/ng-template" id="navbar.html">
    <nav class="navbar navbar-inverse" role="navigation">
      <div class="navbar-header">
        <a class="navbar-brand" ui-sref="landingpage">LandingPage</a>
      </div>
      <ul class="nav navbar-nav">
        <li><a ui-sref="home">Home</a></li>
        <li><a ui-sref="about">About</a></li>
        <li ng-hide="signedIn()"><a href="/login">Log In</a></li>
        <li ng-show="signedIn()"><a ng-click="logout()">Log Out</a></li>
      </ul>
    </nav>
  </script>

  <script type="text/ng-template" id="home.html">
    <h1>The Homey Page</h1>
  </script>

  <script type="text/ng-template" id="about.html">
    <h1>The About Page</h1>
  </script>

  <script type="text/ng-template" id="landingpage.html">
    <h1>Landing Page</h1>
    <a ui-sref="home">Home</a>
  </script>
</div>
17
naeramarth7