Group Angular Routes in ui-router without a parent template

I wanted to group a set of routes so I could show them as ‘active’ in my navigation bar. Adding this ‘active’ HTML class was easy. You can use the $state.includes() method

Here’s the navbar HTML

<nav>   
<ul style="display: block;">
<li ng-class="{active: $state.includes('vendor')}">
<a><i class="fa fa-th-large"></i> <span class="nav-label">Vendors</span> <span class="fa arrow"></span></a>
<ul class="nav nav-second-level">
<li><a ui-sref="vendor.create">Add Vendor</a></li>
<li><a ui-sref="vendor">Edit Vendors</a></li>
</ul>
</li>
</ul>
</div>
</nav>

The trickier part was to configure the routes properly. Basically, I wanted to create a parent route but not specify any template since I would not really want to `activate` the parent state. Its just for grouping sake. Fortunately, ui-router has an ‘abstract’ route concept which does exactly this. More details here . My route config now looks like below

$stateProvider
.state('vendor', {
url: '/vendors',
abstract: true,
template: '<ui-view/>'
})
.state('vendor.list', {
url: '/list',
templateUrl: 'partials/vendor/list.html',
controller: 'VendorCtrl',
data: {
pageTitle: 'Add Vendor'
}
})
.state('vendor.create', {
url: '/create',
templateUrl: 'partials/vendor/create.html',
controller: 'VendorCtrl',
data: {
pageTitle: 'Add Vendor'
}
})
.state('vendor.edit', {
url: '/:id/edit',
templateUrl: 'partials/vendor/edit.html',
controller: 'VendorCtrl',
data: {
pageTitle: 'Edit Vendor'
}
})
Show your support

Clapping shows how much you appreciated Akshay Agarwal’s story.