current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite
1

I'm working on one of my first projects in AngularJS, and I'm using ng-view with $routeProvider for my templating, but I've run into a small problem. On a few of my pages (landing, login, and registration) I don't want the navbar to show; but I want the navbar to show on all my other views. What are my options in fixing this problem using AngularJS?

The link below includes the index.html, login.html, and my $routeProvider

index.html

<body ng-app="hello">

    <!-- FIXED NAVBAR -->
    <div class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle Navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">hello</a>
        </div>
          <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
              <li><a href="#">Add Group</a></li>
              <li><a href="#">Upload File</a></li>
              <li class="active"><a href="#">Notifications</a></li>
            </ul>
          </div>
      </div>
    </div>

    <div class="container">
      <div ng-view></div>
    </div>
</body>

login.html

<div class="container">
<form ng-controller="AdminUserCtrl" class="form-signin" role="form" method="post">
    <h2 class="form-signin-heading">Please sign in</h2>
    <input type="email" class="form-control" id="inputUsername" placeholder="Email address" ng-model="login.email" required autofocus>
    <input type="password" class="form-control" id="inputPassword" placeholder="Password" ng-model="login.password" required>
    <div class="checkbox">
        <label>
            <input type="checkbox" value="remember-me"> Remember Me
        </label>
    </div>
    <button class="btn btn-lg btn-primary btn-block" type="submit" ng-click="logIn(login.email, login.password)">Sign In</button>
    <p style="text-align: center; margin-top: 5px;"><a style="text-align: center;" href="#/register">Register A New Account</a></p>
</form>

$routeprovider

hello.config([ '$locationProvider', '$routeProvider', 
function($location, $routeProvider) {
    $routeProvider.
        when('/', {
            templateUrl: 'views/login.html',
            controller: 'AdminUserCtrl',
            access: { requiredLogin: false}
        }).
       when('/feed', {
            templateUrl: 'views/feed.html',
            controller: 'FeedListCtrl',
            access: { requiredLogin: true}

        otherwise({
            redirectTo: '/'
        });
 }]);

The hack I'm currently thinking of to fix this is taking out the html code for the navbar out of the index and only adding it in the pages I need it, but i was wondering if there is another fix?

share|improve this question
    
Your code has to go in the question, not on an external code-hosting service like "plnkr". –  meagar♦ Aug 15 '14 at 3:37
    
how is this question off topic? i just thought theres too much code to put it in the actual question. –  Saleh Aug 16 '14 at 19:19
    
You thought wrong. Your code has to go in the question for the question to be on-topic here. If you have too much code to go in the question, your question is, by definition, off-topic. –  meagar♦ Aug 16 '14 at 19:33

1 Answer 1

up vote 2 down vote accepted

The navigation bar and other components that are separate from ng-view should have their own controllers. You can communicate information to these controllers from controllers within the view using a service. Properties of this service can be bound to the navigation views and their display can be updated based on the values of the properties. For example.

app.factory("navBarService", function () {
    return {show: true};
});

app.controller("NavBarController", function (navBarService) {
    this.show = navBarService.show;
});

app.controller("SomeControllerYouRouteToController", function (navBarService) {
    navBarService.show = false;
});
share|improve this answer
    
on the main <div> that controls the navbar would i add ng-controller="NavbarController"? –  Saleh Aug 18 '14 at 0:50
    
@Saleh yes you would –  Explosion Pills Aug 18 '14 at 13:03

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.