Trouble with angular and bootstrap navbar

Alexandre TELLIER

unread,

Dec 6, 2015, 4:26:54 PM12/6/15

to AngularJS

Hello,

I am a newbie in Angurar and I try to mix angular with bootstrap navbar.

The navbar is correcly displayed but when the with is small, the toggle button don't display the options.

This is my HTML code :

<!DOCTYPE html >
<html lang="fr" xmlns="http://www.w3.org/1999/xhtml" ng-app="myapp">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>VitraGranit</title>
	
	<!-- <link rel="shortcut icon" href="images/favicon.png"> -->
	<meta name="description" content="">
	<meta name="keywords" content="">
	
	
    <!-- CSS (load bootstrap) -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
	
    <style>
        .navbar { border-radius:0; }
    </style>	
	
	<!-- Angular -->
	<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js"></script>
	<!-- UI-Router -->
	<script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
	<!-- App Script -->
	<script src="myapp.js"></script>	
</head>

<body ng-app="myapp">
        <nav ng-controller="HeaderCtrl" class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" ng-click="navbarCollapsed = !navbarCollapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                        <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" ui-sref="route1">Project Title</a>
                </div>
                <div id="navbar" class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li ng-class="{ active: isActive('/route1') }"><a ui-sref="route1">route1</a></li>
                        <li ng-class="{ active: isActive('/route2') }"><a ui-sref="route2">route2</a></li>
                    </ul>
                </div>
            </div>
        </nav>
	<!-- MAIN CONTENT -->
	<div class="container">
		<!-- THIS IS WHERE WE WILL INJECT OUR CONTENT ============================== -->
		<div ui-view></div>
	</div>       



</body>
</html>

Then my js :

var myapp = angular.module('myapp', ["ui.router"])

myapp.controller("HeaderCtrl", function($scope, $location) {
$scope.navbarCollapsed = true;
$scope.activeLink = function(n) {
    return ($state.is(n) ? "active" : "");   
}
});

myapp.config(function($stateProvider, $urlRouterProvider){
  // For any unmatched url, send to /route1
  $urlRouterProvider.otherwise("/route1")
  
  $stateProvider
	.state('route1', {
		url: "/route1",
		templateUrl: "route1.html"
	})
	  .state('route1.list', {
		  url: "/list",
		  templateUrl: "route1.list.html",
		  controller: function($scope){
			$scope.items = ["A", "List", "Of", "Items"];
		  }
	  })
	  
	.state('route2', {
		url: "/route2",
		templateUrl: "route2.html"
	})
	  .state('route2.list', {
		  url: "/list",
		  templateUrl: "route2.list.html",
		  controller: function($scope){
			$scope.things = ["A", "Set", "Of", "Things"];
		  }
	  })
})

And the partial HTML :

<div class="jumbotron text-center">
	<h1>Route 1</h1>
	<hr/>
	<a ui-sref=".list">Show List</a>
	<div ui-view></div>
</div>

The solution should be near yet I cannot solve my problem.

Thanks for any help.

o_O Bille

unread,

Dec 7, 2015, 6:31:48 AM12/7/15

to AngularJS

Hi!

It's just a bit of a conflict problem. If you use bootstrap components, some of them requires bootstrap-javascript. This is copied from the bootstrap supportpages:

"If JavaScript is disabled and the viewport is narrow enough that the navbar collapses, it will be impossible to expand the navbar and view the content within the .navbar-collapse.

The responsive navbar requires the collapse plugin to be included in your version of Bootstrap."

See the NAVbar requires the "bootstrap collapse plugin". So the Angular-team have made a similar collapse module in Angular, you will have to use it, (Which you should).

You will have to make small changes to your code, I have not tried to make the setup you have, so can't say if its difficult, but Collapse plugin in Angular is right here for you
http://angular-ui.github.io/bootstrap/

More about the same subject: https://scotch.io/tutorials/how-to-correctly-use-bootstrapjs-and-angularjs-together

Cheers

Bille
www.elitenet.dk

Alexandre TELLIER

unread,

Dec 7, 2015, 4:09:59 PM12/7/15

to AngularJS

Thanks. I am trying to apply in navbar.

Quite difficult to make, yet your post allow me to understand collapse.

Alexandre TELLIER

unread,

Dec 7, 2015, 5:56:21 PM12/7/15

to AngularJS

Solution can be found here https://www.npmjs.com/package/ui-navbar

Reply all

Reply to author

Forward