How to attach navbar only on certain pages using ui-router?

Question

How to display a navbar on every page except landingpage, so that not have to attach a navbar file on each of needed pages? Now I have enclosed navbar on main app layout, how it should be handled to keep it DRY?

Demo (with navbar on each page):

 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

Created named views like <div ui-view name="nav"></div> and set the templateUrl by view by state. For the landingpage state, just don't provide a templateUrl for the nav view and it won't render the navbar.

Update : hide on landingpage not home state.

 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>