如何在Angular UI路由器的嵌套状态下使用多个视图？

Question

I am working on an Angular app which has multiple nested states.

The initial ui-view either loads the app or the login page based on the authentication. Once the app is loaded, it contains the top header and another named ui-view 'content' which would load the content based on the current tab/navigation.

$stateProvider.state( 'app.home.dashboard', {
url: 'home/dashboard',
views: {
   "content@app.home": {
    controller: 'DashboardCtrl',
    templateUrl: 'app/home/dashboard.html'
  }
},
data: {
  authenticate: true
},
resolve: {
}

})

This is the dashboard state configuration.

Problem : Now I want to load multiple data widgets in the dashboard, each of them would have their own resolves, templates and views.

So once the dashboard is loaded all those multiple child views should start loading automatically.

.state( 'app.home.dashboard.dataWidget.spend', {
url: '',
views: {
  "spend@app.home.dashboard": {
    controller: 'DashboardDataWidgetCtrl',
    templateUrl: 'app/home/dashboard/data-widget.html'
  }
},
data: {
  authenticate: true
},
resolve: {
  spend: ['userInfo','apiDataFactory', function(userInfo, apiDataFactory) {
    apiDataFactory.getSpend()
    .then(function(response) {
      return response.data;
    });
  }]
}

})

.state( 'app.home.dashboard.dataWidget.touchPoint', {
url: '',
views: {
  "touchPoint@app.home.dashboard": {
    controller: 'DashboardDataWidgetCtrl',
    templateUrl: 'app/home/dashboard/data-widget.html'
  }
},
data: {
  authenticate: true
},
resolve: {
  spend: ['userInfo','apiDataFactory', function(userInfo, apiDataFactory) {
    apiDataFactory.getTouchPoint()
    .then(function(response) {
      return response.data;
    });
  }]
}

})

But when I go to dashboard state these child states do not load automatically. How can I achieve this? What am I doing wrong?

Created a small plunker app to illustrate my problem and approach. How should I resolve data into the widgets simultaneously?

Answer 1

I have updated your plunk with the fixes. The dashboard state was the problem:

.state('app.home.dashboard', {
  url: 'home/dashboard',
  views: {
    "content@app.home": {
      controller: 'appDashboardCtrl',
      templateUrl: 'dashboard.html'
    },
    "visit@app.home.dashboard": {
      controller: 'appContactCtrl',
      templateUrl: 'contact.html'
    },
    "reach@app.home.dashboard": {
      controller: 'appAboutCtrl',
      templateUrl: 'about.html'
    }
  }
})

Please see: http://plnkr.co/edit/fDLQTIpdfROageEtBPZv?p=preview

You may want to reference the information here:

https://github.com/angular-ui/ui-router/wiki/multiple-named-views

Once you publish your templates I may be able to help further.