How To Attach Navbar Only On Certain Pages Using Ui-router?

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 sh

Solution 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.

varApp = 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');
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><scriptsrc="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script><linkhref="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"rel="stylesheet"type="text/css" /><divng-app="app"><divui-viewname="nav"></div><divclass="container"><divui-viewname="content"></div></div><scripttype="text/ng-template"id="navbar.html"><navclass="navbar navbar-inverse"role="navigation"><divclass="navbar-header"><aclass="navbar-brand"ui-sref="landingpage">LandingPage</a></div><ulclass="nav navbar-nav"><li><aui-sref="home">Home</a></li><li><aui-sref="about">About</a></li><ling-hide="signedIn()"><ahref="/login">Log In</a></li><ling-show="signedIn()"><ang-click="logout()">Log Out</a></li></ul></nav></script><scripttype="text/ng-template"id="home.html"><h1>The Homey Page</h1></script><scripttype="text/ng-template"id="about.html"><h1>The About Page</h1></script><scripttype="text/ng-template"id="landingpage.html"><h1>Landing Page</h1><aui-sref="home">Home</a></script></div>