AngularJS ng-view Layout manage - angularjs

Question

Hi I am working on a project using angularjs.
My roting logic is
.state( "authenticate", {
url: '/',
templateUrl : "views/login.html",
controller : "LoginCtrl",
data : {
requireLogin : false
}
})
.state( "beats", {
url: '/beats',
templateUrl : "views/beats.html",
controller : "BeatsCtrl",
data : {
requireLogin : true
}
})
.state( "outlets", {
url: '/outlets',
templateUrl : "views/beats.html",
controller : "BeatsCtrl",
data : {
requireLogin : true
}
})
I have ng-view in index.html that includes login.html first (url '/'). after login in each state I want to include a navbar in each template using ng-include.
currently I am writing in each page this line
<div ng-include=" 'templates/navbar.html' "></div>
but I want to include only once and each view should be render below it. But the problem is this navbar template itself getting render in ng-view.
and as far as I know we can not have multiple ng-view in one app.
can anyone please tell me what should be the best approach of doing this.

Answer 1

You could potentially have this nav bar included in the index.html itself, but hide it using ng-if or ng-show till the user is logged in. Once the user is logged in you could have a flag that evaluates to true and this nav bar can appear on every subsequent page.
in index.html
<div id="navbar" ng-if="isUserLoggedIn">
// nav bar code
</div>
And this 'isUserLoggedIn' will be set to true by your LoginCtrl on the scope.