Come collegare la barra di navigazione solo su determinate pagine usando l'interfaccia utente?

Question

Come visualizzare una barra di navigazione su ogni pagina tranne la pagina di destinazione, in modo da non dover allegare un file di navigazione su ciascuna delle pagine necessarie? Ora ho incluso la barra di navigazione nel layout dell'app principale, come dovrebbe essere gestito per mantenerlo ASCIUTTO?

Demo (con barra di navigazione in ogni pagina):

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

Creato viste con nome come <div ui-view name="nav"></div> e impostare il TemplateURL da vista per stato. Per lo stato landingpage, non fornire un templateUrl per la vista nav e non eseguirà il rendering della barra di navigazione.

Aggiornamento: nascondere su landingpage non home stato.

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>