How to make tabs in angularJS have separate controllers?

Question

Right now i am using routeProvider to change between views which works awesome. But now i want to create a view which contains 4 different tabs which should contain 4 different controllers. ive read here that it could be done with stateProvider:

Angular ui tab with seperate controllers for each tab

here is my code:

var WorkerApp = angular.module("WorkerApp", ["ngRoute", 'ngCookies', "ui.bootstrap", "ngGrid", 'ngAnimate', 'ui.router']).config(function ($routeProvider, $stateProvider) {
    $routeProvider.
        when('/login', {
            templateUrl: 'Home/Template/login', resolve: LoginCtrl.resolve
        })
        .when('/register', { templateUrl: 'Home/Template/register', resolve: RegisterCtrl.resolve  })
        .when('/', { templateUrl: 'Home/Template/main', resolve: MainCtrl.resolve })
        .when('/profile', { templateUrl: 'Home/Template/profile', controller: "ProfileController" })
        .when('/contact', { templateUrl: 'Home/Template/contact', controller: "ContactController" })


    $stateProvider.state('tabs', {
        abstract: true,
        url: '/profile',
        views: {
            "tabs": {
                controller: "ProfileController",
                templateUrl: 'Home/Template/profile'
            }
        }
    }).state('tabs.tab1', {
        url: '/profile',  //make this the default tab
          views: {
              "tabContent": {
                  controller: "ProfileController",
                  templateUrl: 'Home/Template/profile'
              }
          }
      })
      .state('tabs.tab2', {
          url: '/tab2',
          views: {
              "tabContent": {
                  controller: 'Tab2Ctrl',
                  templateUrl: 'tab2.html'
              }
          }
      });


});

but i cant get it really to work because default of routeprovider is set to send over to work because my routeprovider is sending over to "/" on default, which makes "/tabs" invalid. so i cant actully figure out if it is possible to switch to states on specific url. Or change state on specific URL in routeProvider?

Answer 1

I can't tell you for sure exactly what's wrong with the code you've provided, but I'm using Angular UI-Router with the same use case you described, and it's working for me. Here's how I have it configured and how it's different from your configuration:

1. I don't use $routeProvider at all (none of your $routeProvider.when statements). I'm pretty sure you should not be using $routeProvider since you're using $stateProvider.

2. I have one use of the $urlRouterProvider with an 'otherwise' statement to specify a default URL:

   $urlRouterProvider.otherwise("/home");
   

3. My calls to $stateProvider.state is a little different from yours. Here's the one for the parent view of the tabs:

   $stateProvider.state('configure', {
       url: "/configure",
       templateUrl: 'app/configure/configure.tpl.html',
       controller: 'ConfigureCtrl'
   });
   

   Here's an example of the child state (really the same except for the state name being parent.child format, which you already have in your code; and I added a resolve block but you could have that on the parent as well):

   $stateProvider.state('configure.student', {
       url: "/student",
       templateUrl: 'app/configure/student/configure.student.tpl.html',
       controller: 'ConfigureStudentCtrl',
       resolve: {
           storedClassCode: function($q, user, configureService) {
               return configureService.loadMyPromise($q, user);
           }
       }
   });
   

Also, I'm using version 0.2.8 of Angular UI-Router with version 1.2.9 of Angular. I think this would work with any version of Angular 1.2.0 or later.