I have an issue with my navbar updating...After login with my credentials my navbar is not updating..however my response is success..but how to update change my header..it have to show logout after login..Her is my Html code.How to write authentication for this..Please help me out.I am at end of my project..
<div ng-controller="NavbarCtrl" class="navbar navbar-default navbar-static-top" id="header">
<div class="container">
<div class="navbar-header">
<button type="button" data-toggle="collapse" data-target="#navbar" class="navbar-toggle collapsed">
<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="#/"><i class="ion-ios7-pulse-strong">Onio</i><img src="images/onio1.png"/></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul ng-if="isAuthenticated()" class="nav navbar-nav">
<li>Home</li>
<li >About</li>
<li >Products</li>
</ul>
<ul ng-if="!isAuthenticated()" class="nav navbar-nav pull-left">
<li>Home</li>
<li >About</li>
</ul>
<ul ng-if="!isAuthenticated()" class="nav navbar-nav pull-right">
<li>Login</li>
<li>Sign up</li>
</ul>
<ul ng-if="isAuthenticated()" class="nav navbar-nav pull-right">
<li>Logout</li>
<li><a href="#" data-toggle="dropdown" class="navbar-avatar dropdown-toggle">Welcome, {{userInfo}}
</a></li>
</ul>
<!--<ul ng-if="!isAuthenticated()" class="nav navbar-nav pull-right">-->
<!--<!–<li><button class="btn btn-facebook" ng-click="fbLogoutUser()">FBLogOut</button></li>–>-->
<!--<li class="fb-login-button" data-max-rows="1" ng-click="FBLogin()" data-size="large" data-show-faces="false"> </li>-->
<!--</ul>-->
</div>
</div>
Related
I generated an AngularJS app with yeoman. The navbar works and when I click on the an element the enw page loads, however the clicked button don't get highlighted.
This is the navbar code
<div class="header">
<div class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-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="#!/">myApp</a>
</div>
<div class="collapse navbar-collapse" id="js-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">1</li>
<li><a ng-href="#!/page2">2</a></li>
<li><a ng-href="#!/page3">3</a></li>
<li><a ng-href="#!/page4">4</a></li>
<li><a ng-href="#!/page5">5</a></li>
<li><a ng-href="#!/page6">6</a></li>
</ul>
</div>
</div>
</div>
</div>
There are many ways you can do this. Here there is one of them
Create a controller and set a var called currentLink like this
//...
.controller('headerCtrl', function($scope){
$scope.currentLink = 1;
$scope.set = function(link){
$scope.currentLink = link;
}
});
//...
now in your html modify your code like this:
<div class="header" ng-controller="headerCtrl">
<!--...-->
<div class="collapse navbar-collapse" id="js-navbar-collapse">
<ul class="nav navbar-nav">
<li ng-class="{'active': currentLink == 1}">1</li>
<li ng-class="{'active': currentLink == 2}"><a ng-href="#!/page2" ng-click="headerCtrl.set(2);">2</a></li>
<li ng-class="{'active': currentLink == 3}" ><a ng-href="#!/page3" ng-click="headerCtrl.set(3);">3</a></li>
<li ng-class="{'active': currentLink == 4}"><a ng-href="#!/page4" ng-click="headerCtrl.set(4);">4</a></li>
<!-- and so on-->
</ul>
<!--...-->
</div>
This way with ng-class you switch from active or not every link and with ng-click you set that link as active when clicked;
I've added angular to my bootstrap project and I've noticed that the mobile nav button doesn't collapse the menu any more. This was previously working.
This is the page where I have this issue
<!-- TOP NAV -->
<div class="container-100-percent">
<div class="navbar navbar-default navbar-fixed-top navbar-header">
<button aria-controls="bs-navbar" aria-expanded="true" class="navbar-toggle" data-target=".navbar-collapse" data-toggle="collapse" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Top Tech Jobs
</div>
<nav class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li>HOME</li>
<li>ABOUT</li>
<li>JOBS</li>
<li>CANDIDATES</li>
<li>CLIENTS</li>
<li>CONTACT</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><button type="button" class="btn-register">Register</button></li>
<li> or</li>
<li>Login</li>
</ul>
</nav>
I'm not sure what the best way to fix this is. Any ideas?
How to differentiate SPA appearance for Admin and normal user in Angular JS? I did try ng-show to but while refreshing the page the hidden options in menu is visible for a second. Any best practice to separate page fields and options for admin and normal user?
<div class="container navbarcontainer">
<nav class="navbar navbar-inverse" style="z-index: 1;">
<div class="container-fluid" style="padding-right: 12px; padding-left: 12px; font-size: 12px;">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse scrollable-menu" id="myNavbar">
<ul class="nav navbar-nav showActiveClasss boxyfontmenu">
<li><a ui-sref="home" class="visible-xs bordermenuitem" data-toggle="collapse" data-target=".navbar-collapse"><span class="" id="sp">Home</span></a>
<a ui-sref="home" class="hidden-xs bordermenuitem" id="sp">Home</span></a>
</li>
<li><a ui-sref="ringtones" class="visible-xs" data-toggle="collapse" data-target=".navbar-collapse"><span id="sp">Ringtones</span></a>
<a ui-sref="ringtones" class="hidden-xs"><span id="sp">Ringtones</span></a>
</li>
<li ng-show="user.role=='admin'"><a ui-sref="userList" class="visible-xs" data-toggle="collapse" data-target=".navbar-collapse"><span id="sp">User list</span></a>
<a ui-sref="userList" class="hidden-xs"><span id="sp">User list</span></a>
</li>
<li><a ui-sref="contactus" class="visible-xs" data-toggle="collapse" data-target=".navbar-collapse"><span id="sp">Contact us</span></a>
<a ui-sref="contactus" class="hidden-xs"><span id="sp">Contact us</span></a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-facebook-square facebook"></i></li>
<li><i class="fa fa-twitter twitter"></i></li>
<li><i class="fa fa-youtube-play youtube"></i></li>
</ul>
</div>
</div>
</nav>
</div>
hide all by default and set style for rules maybe
<li class="hidden-by-default" ng-class="{'hidden-by-default': !isAdmin}"></li>
Set isAdmin in controller with timout to false or when you load the rules from server... it will work by default :D
Note that your initial value should be true for this
Why isn't there an official navbar example?
https://angular-ui.github.io/bootstrap/
Searching on the web, I've found a few examples but they don't work on the latest released AngularUI version and Bootstrap. All the examples I've found were for older versions.
Here is one I forked and got working:
AngularJS v1.3.15
angular-ui-bootstrap 0.12.1
Bootstrap v3.3.2
<nav class="navbar navbar-default" ng-controller="NavbarController">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" ng-click="isCollapsed = !isCollapsed" aria-expanded="true">
<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="#">Brand</a>
</div>
<div class="navbar-collapse collapse in" collapse="isCollapsed" aria-expanded="true">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span>
</li>
<li>Link
</li>
<li class="dropdown" dropdown>
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
<li class="divider"></li>
<li>One more separated link
</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link
</li>
</ul>
</div>
</div>
</nav>
http://plnkr.co/edit/2KQrqtrvHSiGjWZiHMB3?p=preview
I'm trying to get my navbar to collapse correctly. I have three links on the right that should disappear when my navbar collapses. Instead, they overlay the links I want to appear upon collapse. Any suggestions?
Here is my code:
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
XYZ
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav pull-left">
<li>Home</li>
<li>Projects</li>
<li>Finance</li>
<li>Resume</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li> </li>
<li></li>
<li></li>
</ul>
</div>
</div>
####UPDATED CODE, but icons collapse on new row overlaying content #######
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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><img src="img/lior.jpeg">
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Projects</li>
<li>Finance</li>
<li>Resume</li>
</ul>
<div style="float:right">
<ul class="nav navbar-nav navbar-right hidden-xs hidden-md">
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
The easiest way seem to use the http://getbootstrap.com/css/#responsive-utilities.
For your right navigation (icons) use:
<ul class="nav navbar-nav navbar-right hidden-xs hidden-md">
This will hide the icons when the navbar has been collapsed.
Also read: Bootstrap 3 Multiple Nav bar Menus