Load controller dynamically based on route group

Question

Is it possible to load a controller, it\'s js file, and a template dynamically based on a route group? Psuedo code which doesn\'t work:

$routeProvider.when(\         


        

Answer 1

Simplest way with active this with less amount of code

require.js config file.

require.config({
    urlArgs: 'v=1.0',
    baseUrl: '/'
});

app.config(['$controllerProvider', '$compileProvider', '$filterProvider', '$provide','$routeProvider',function($controllerProvider, $compileProvider, $filterProvider, $provide,$routeProvider) {
  app.register = {
    controller: $controllerProvider.register,
    directive: $compileProvider.directive,
    filter: $filterProvider.register,
    factory: $provide.factory,
    service: $provide.service
  };
  // Resolver to load controller, service, directive
  var resolveController = function(dependencies) {
      return {
        load: ['$q', '$rootScope', function ($q, $rootScope) {
          var defer = $q.defer();
          require(dependencies, function () {
              defer.resolve();
              $rootScope.$apply();
          });
          return defer.promise;
        }]
      }
  };
  $routeProvider
    .when("/home", {
        templateUrl : "templates/home.html",
        controller: 'HomeCtrl',
        resolve: resolveController(['controller/HomeCtrl'])
    })
    .when("/ContactUs", {
        templateUrl : "templates/ContactUs.html",
        controller: 'ContactUsCtrl',
        resolve: resolveController(['controller/ContactUsCtrl'])
    })
    .when("/About", {
        templateUrl : "templates/About.html",
        controller: 'AboutCtrl',
        resolve: resolveController(['controller/AboutCtrl'])
    });
  $routeProvider.otherwise('/home');
}]);

Your controllers should look like this.

define(['app'],function(app){
    app.register.controller('HomeCtrl',['$scope',function($scope){
      // Controller code goes here
    }]);
});