How to add user controller when using ui-router with nested views?

Question

I'm using ui-router with nested views to display a few tables with user data on a user profile page. Here is an overview of the routes:

routes.config.js

(function() {
    'use strict';

    angular.module('app.routes').config(routesConfig);

    routesConfig.$inject = ['$stateProvider', '$locationProvider', '$urlRouterProvider', 'RouteHelpersProvider'];
    function routesConfig($stateProvider, $locationProvider, $urlRouterProvider, helper){

        // Set the following to true to enable the HTML5 Mode
        // You may have to set <base> tag in index and a routing configuration in your server
        $locationProvider.html5Mode(false);

        // defaults to dashboard
        $urlRouterProvider.otherwise('/app/home');

    // 
    // Application Routes
    // -----------------------------------   
    $stateProvider
      .state('app', {
          url: '/app',
          abstract: true,
          templateUrl: helper.basepath('app.html'),
          resolve: helper.resolveFor('fastclick', 'modernizr', 'icons', 'screenfull', 'animo', 'sparklines', 'slimscroll', 'classyloader', 'toaster', 'whirl','loaders.css', 'spinkit','jquery-ui', 'jquery-ui-widgets','weather-icons', 'skycons')
      })
      .state('app.home', {
          url: '/home',
          title: 'Home',
          templateUrl: helper.basepath('home.html'),
      })
      .state('app.user', {
          abstract: true,
          templateUrl: helper.basepath('user.html'),
          // controller: 'UserPageController',
          // controllerAs: 'userCtrl',
          resolve: helper.resolveFor('datatables')
      })
      .state('app.user.dashboard', {
          url: '/user',
          title: 'User',
          controller: 'UserPageController',
          controllerAs: 'userCtrl',
          views: {
            'eventTable': {
              templateUrl: helper.basepath('userProfile/eventTable.html'),
              controller: 'EventTableController',
              controllerAs: 'eventCtrl'
            },
            'bankStatement': {
              templateUrl: helper.basepath('userProfile/bankStatement.html'),
              controller: 'BankStatementController',
              controllerAs: 'bankCtrl'
            },
            'purchasesTable': {
              templateUrl: helper.basepath('userProfile/purchasesTable.html'),
              controller: 'PurchasesTableController',
              controllerAs: 'purchasesCtrl'
            },
            'paymentsTable': {
              templateUrl: helper.basepath('userProfile/paymentsTable.html'),
              controller: 'PaymentsTableController',
              controllerAs: 'paymentsCtrl'
            },             
            'clicksTable': {
              templateUrl: helper.basepath('userProfile/clicksTable.html'),
              controller: 'ClicksTableController',
              controllerAs: 'clicksCtrl'
            }, 

          }
      });
    } // routesConfig

})();

When I try to add another controller to display the user's basic info(I have tried adding the controller to app.user and app.user.dashboard) the controller is never activated. Here is the rest of the relevant code:

user.html

<h3 class="fixedSubHeader">{{userCtrl.userInfo}}</h3>
<section ui-view="eventTable"></section>
<section ui-view="bankStatement"></section>
<section ui-view="paymentsTable"></section>
<section ui-view="purchasesTable"></section>
<section ui-view="clicksTable"></section>

userPage.controller.js

(function() {
    'use strict';

    angular
        .module('app.userPage')
        .controller('UserPageController', UserPageController);

    UserPageController.$inject = ['$resource'];
    function UserPageController($resource) {
        var vm = this;
        activate();
        // console.log("USER!!!!!");

        ////////////////

        function activate() {

          // Ajax

          $resource('server/basic-info-table.json').query().$promise.then(function(userInfo) {
             vm.userInfo = userInfo;

          });
        }
    }
})();

I originally thought this was a problem with the userPage controller so I tried injecting $scope and getting rid of the var vm = this syntax. This approach, however, also did not work. Any help would be greatly appreciated. Thanks

Answer 1

From what I see, you are trying to use one controller UserPageController for all of the ui-views, and then they have their own controller.

So I assume you want UserPageController to be the parent controller to all of those ui-views. To do this, those should all be their own states. Make them a child state of app.user.dashboard.

For example:

$stateProvider
      .state('app.user.dashboard', {
          url: '/user',
          title: 'User',
          controller: 'UserPageController',
          controllerAs: 'userCtrl'
      })
      .state('app.user.dashboard.eventTable', {
          views: {
              'eventTable@dashboard': {
                  templateUrl: helper.basepath('userProfile/eventTable.html'),
                  controller: 'EventTableController',
                  controllerAs: 'eventCtrl'
              }
          }
      },
      // Repeat the other states here...
      );

And in user.html, you can use a ui-view like so:

<section ui-view="eventTable@dashboard"></section>

Now every child state of app.user.dashboard will have the parent controller of UserPageController which they can inherit from, while they can also have their own controller.

If you are on the app.user.dashboard state and you transition to app.user.dashboard.eventTable, you will still be on app.user.dashboard, however now the app.user.dashboard.eventTable will be a sort of "child state" within the parent state, without having to leave the parent state, at least in terms of the UI.

---

Be aware that if you don't have any sort of default content on app.user.dashboard, then you would want to transition to some default child state so you aren't left with some empty screen.

You can do this by first adding a default param in your app.user.dashboard state:

$stateProvider
      .state('app.user.dashboard', {
          url: '/user',
          title: 'User',
          controller: 'UserPageController',
          controllerAs: 'userCtrl'
          defaultChildState: 'app.user.dashboard.eventTable'
      })
      // ...

...and then in your run block, add something like this:

    $rootScope.$on('$stateChangeStart', function(event, toState, toParams) {
        if (toState.defaultChildState) {
            event.preventDefault();
            $state.go(toState.defaultChildState, toParams);
        }
    });

The above code will basically check for the defaultChildState property when you go to app.user.dashboard, and then it will go to that state. So any time you go to app.user.dashboard, you are actually going to app.user.dashboard.eventTable, or whatever other default state you name.