JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular-route.js"></script>
<div ng-app="ap">
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="" class="dropdown-toggle"
data-toggle="dropdown">DropMenuA<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#/actionA1?title=Some title" title="do A 1">action1</a></li>
<li><a href="#/actionA2?title=Some other title" title="do A 2">action1</a></li>
<li><a href="#/actionA3" title="do A 3">action1</a> </li>
</ul>
</li>
<li class="dropdown">
<a href="" class="dropdown-toggle"
data-toggle="dropdown">DropMenuB<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#/actionB1" title="do B 1">action1</a></li>
<li><a href="#/actionB2" title="do B 2">action1</a></li>
<li><a href="#/actionB3" title="do B 3">action1</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="container" style="padding-top: 70px">
<p> Container </p>
<div ng-view> </div>
</div>
</div>
CSS
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
JavaScript
var app = angular.module('ap', ["ngRoute"]);
app.controller('myController', ['$scope', '$routeParams', function ($scope, $routeParams) {
$scope.r = $routeParams;
}]);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when(':resourcePath\*', {
template: "The resource path is: {{r.resourcePath}}, title is {{r.title}}",
controller: 'myController'
});
}]);