CODEWITHSUNDEEP
angularjs
Pankaj
Pankaj

Reputation: 10115

Bootstrap Navbar in AngularJs

I am trying this tutorial to implement Navbar in AngularJS

Navbar Code

<nav class="navbar navbar-default" role="navigation">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed">
            <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="collapse navbar-collapse" uib-collapse="navCollapsed">
        <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
              <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
              <li><a href="#">Link</a></li>
              <li class="dropdown">
              </li>
          </ul>
          <ul class="nav navbar-nav navbar-right" ng-controller="LoginController">
              <li><a href="#/register">Register</a></li>
              <li><a href="#/">Login</a></li>
          </ul>
      </div>
    </div>
</nav>

Dependencies List

"dependencies": {
    "angular": "^1.6.2",
    "angular-route": "^1.6.2",
    "angular-cookies": "^1.6.2",
    "angular-translate": "^2.14.0",
    "angular-translate-loader-static-files": "^2.14.0",
    "angular-animate": "^1.6.2",
    "angular-touch": "^1.6.2",
    "angular-bootstrap": "^2.5.0",
    "bootstrap": "^3.3.7"
}

Problem is: It does not work on mobile device. It shows like I requested desktop view. I am truing to see Toggle Navbar

My webpage Url: http://pankajservers.in

Am I missing something?

Upvotes: 0

Views: 2680

Answers (2)

MichaelHuelsen
MichaelHuelsen

Reputation: 416

First of all, it would have been helpful to have a minimum working example. One needs to guess whether you've included angular, bootstrap and ui-bootstrap properly.

I tested it with the same angular, ui-bootstrap and bootstrap versions you mentioned in your dependencies.

If you uncomment some tags in a clever way, your code even works.

The div container that wraps your unsorted lists messes things up. When using Firebug, you are able to see that the hamburger menu is working, but your ui items are just not showing up.

<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
    <button type="button" class="navbar-toggle" ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed">
        <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="collapse navbar-collapse" uib-collapse="navCollapsed">
    <!-- Collect the nav links, forms, and other content for toggling -->
    <!-- comment out the div block, this messes things up -->
    <!-- <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">-->
          <ul class="nav navbar-nav">
          <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
          <li><a href="#">Link</a></li>
          <li class="dropdown">
          </li>
      </ul>

      <ul class="nav navbar-nav navbar-right">
    <!-- I excluded the controller for testing purposes -->
    <!-- ng-controller="LoginController"> -->
          <li><a href="#/register">Register</a></li>
          <li><a href="#/">Login</a></li>
      </ul>
     <!-- exclude this here -->
     <!--</div>-->
</div>

Upvotes: 2

Edward Smith
Edward Smith

Reputation: 552

Could it be you've got the wrong npm package for angular-ui-boostrap? My nav component is pretty much identical and works. The only difference is that in your package.json you've listed 'angular-bootstrap', where mine is

"dependencies": {
  "angular": "^1.6.1",
  "angular-animate": "^1.6.1",
  "angular-route": "^1.6.1",
  "angular-ui-bootstrap": "^2.4.0",
  "express": "^4.14.0",
  "greenlock-express": "^2.0.8",
  "webpack": "^1.14.0",
  "webpack-dev-server": "^1.16.2"
},

Note I'm using angular-ui-bootstrap instead of angular-bootstrap

Upvotes: 0

Related Questions