Angular.js – Default view when the sub-view is not loaded?

I have a ‘Dashboard’ button in my toolbar area, which loads two views:

  1. A dashboard menu on the left
  2. A dashboard details on the right

So when the URL is:

/#/dashboard/1001

It will show dashboard id 1001. You can change which dashboard is viewed by selecting others in the left menu.

This works well. The problem is that I can’t guarantee that a dashboard will always be loaded (ie: the first one in the list or a favorite or something).

So the following URL is valid:

/#/dashboard

Which I was hoping to have either a default dashboard or a message indicating to select a dashboard in the menu on the left.

The only problem is this hasn’t been working well for me. My default dashboard view is as follows:

<div ng-if="id === null">
  Default dashboard landing page (system dashboard)...
  Or message to load a dashboard from the menu on the left...
</div>

<div ui-view="dashboard-details"></div>

Basically trying to determine if there is an id portion to the URL.

My route looks like this:

//-------------------------------------------------------------------------------------
// Dashboard
//-------------------------------------------------------------------------------------
.state('dashboard', {
  url: "/dashboard",
  views: ...
})

.state('dashboard.detail', {
  url: "/{id:int}",
  views: ...
})

I’d like that if no dashboard has been selected, then I can show a view, but if a dashboard has been selected, then just show the actual dashboard and not that default view.

Source: AngularJS