I am a rank beginner with angularJS and I'm developing the ui for a single-page app in angularJS using node/bower/grunt and I have installed angular-ui-bootstrap and the route and event utils from angular-ui-utils.
I've used ng-class={active:$uiRoute}
on the menu items but when a menu item is selected the active class is not applied...does $uiRoute
handle this or do I need to code it separately?
Apologies for asking a dumb question...
Here is the code:
`<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li ui-route="/" ng-class="{active:$uiRoute}"><a href="#/">Home</a></li>
<li ui-route="/about" ng-class="{active:$uiRoute}"><a href="#/about">About</a></li>
<li ui-route="/other" ng-class="{active:$uiRoute}"><a href="#/other">Other</a></li>
</ul>
</div>
...
<script src="bower_components/angular-ui-utils/modules/route/route.js"></script>
<script src="bower_components/angular-ui-utils/modules/event/event.js"></script>`
And
angular.module('myApp', ['ngRoute','ngResource','ui.bootstrap'])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutCtrl'
})
.when('/other', {
templateUrl: 'views/other.html',
controller: 'OtherCtrl'
})
.otherwise({
redirectTo: '/'
});
})
Looking through the ui-utils docs, it appears you have not injected the module dependency. Change your myApp
to inject ui.utils
angular.module('myApp', [
'ngRoute',
'ngResource',
'ui.bootstrap',
'ui.utils'
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutCtrl'
})
.when('/other', {
templateUrl: 'views/other.html',
controller: 'OtherCtrl'
})
.otherwise({
redirectTo: '/'
});
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With