Cannot resolve state error in ui-route

Question

I have this in route.js

.state('app', {
        url:'/app',
        templateUrl: 'partials/dashboard/index.html'
      })

      .state('app.sales', {
        url:'/app/sales',
        templateUrl: 'partials/dashboard/sales.html'
      })

Then this is my view

<div class="container" ng-controller="DashboardCtrl as vm" ng-init="vm.init()">
    <aside>
        <ul>
            <li ui-sref="sales">Sales</li>
        </ul>
    </aside>
    <div ui-view></div>
</div>

When I clicked on the li, in my console I saw this error Could not resolve 'sales' from state 'app'

What's wrong? I'm trying to use nested view. I want my sidebar to remain and the content change dynamically.

Answer 1

You want to go to the app.sales when putting up a ui-sref on anchor tags. So, you'd do it like this :

<li><a ui-sref="app.sales">Sales</a></li>
   

Answer 2

Use 'app.sales' state name instead in ui-sref