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.
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
