Loading controller on demand using AngularJS and RequireJS

Question

I'm using Angular UI-router and trying to download/load controller when the routing changes. I used resolve and category, the data.data returns the js file content as string. I'm not sure to make the controller available to angular. Please help

My module.js contains below routing code

state("privacy", {
        url: "/privacy",
        controllerProvider: function ($stateParams) {
            return "PrivacyController";
        },
        resolve: {
            category: ['$http', '$stateParams', function ($http, $stateParams) {
                return $http.get("js/privacy.js").then(function (data) {
                    return data.data;
                });
            } ]
        },
        templateUrl: localPath + "templates/privacy.html"
    })

The below controller exist in "js/privacy.js"

socialinviter.controller("PrivacyController", function ($scope) { $scope.me = "Hellow world"; });

I also tried with require js but I'm getting error "http://errors.angularjs.org/1.2.16/ng/areq?p0=PrivacyController&p1=not%20aNaNunction%2C%20got%20undefined"

resolve: {
            deps: function ($q, $rootScope) {
                var deferred = $q.defer(),
                    dependencies = ["js/privacy"];
                    require(dependencies, function () {
                        $rootScope.$apply(function () {
                            deferred.resolve();
                        });
                        deferred.resolve()
                    })
                return deferred.promise;
            }
        }

PrivacyController is defined on a separate file, the $http.get is downloading that file and the data.data contains socialinviter.controller("PrivacyController", function ($scope) { $scope.me = "Hellow world"; }); — Navin Leon
I also tried with requirejs, see the above code, it download the file but it throws error. — Navin Leon

Navin Leon Navin Leon · Accepted Answer · 2014-10-09T23:56:13

I have resolved the issue and I thought the solution would be helpful for others

Step 1: On your config, include the parameter $controllerProvider

mytestapp.config(function ($stateProvider, $controllerProvider)

Step 2: telling angular to register the downloaded controller as controller, add the below inside the config

mytestapp.config(function ($stateProvider, $controllerProvider) {
mytestapp._controller = mytestapp.controller
mytestapp.controller = function (name, constructor){
    $controllerProvider.register(name, constructor);
    return (this);
}
......

Step 3: Add the resolve method as below

state("privacy", {
        url: "/privacy",
        controller: "PrivacyController",
        resolve: {
            deps : function ($q, $rootScope) {
                var deferred = $q.defer();
                require(["js/privacy"], function (tt) {
                    $rootScope.$apply(function () {
                        deferred.resolve();
                    });
                    deferred.resolve()
                });
                return deferred.promise;
            }
        },
        templateUrl: "templates/privacy.html"
    })

Loading controller on demand using AngularJS and RequireJS

1 Answers