Wie kann man navbar nur auf bestimmten Seiten mit dem UI-Router anhängen?

Question

Wie wird eine Navbar auf jeder Seite außer landingpage angezeigt, so dass keine Navbar-Datei auf jeder der benötigten Seiten angehängt werden muss? Jetzt habe ich Navbar im Haupt-App-Layout eingeschlossen, wie es gehandhabt werden sollte, um es trocken zu halten?

Demo (mit navbar auf jeder Seite):

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>

Answer 1

Kreieren Ansicht wie <div ui-view name="nav"></div> und stellen Sie die templateUrl nach Ansicht von Staat benannt. Stellen Sie für den landingpage-Status einfach keine VorlageUrl für die nav Ansicht bereit und die Navigationsleiste wird nicht gerendert.

Aktualisieren: ausblenden auf landingpage nicht home Zustand.

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>