How to split single controller in multiple js files in angularjs

Question

I am rewriting a large application from silver-light to angularjs, while doing it, I am realizing that each of my controller js file is spanning 2000-3000 lines of code. All of my code is heavily dependent on scope variables. Wondering if there is any opportunity to split single controller js file into multiple js files? Any pointer would be appreciated.

Services and factories should be your friends. You also mention that things rely upon a lot of scope variables. If something isn't bound to the DOM, I try not to hang it off the scope — Mark Meyer, Sep 13 '14 at 05:06
Pramod, although it is spanning 2-3K, the code is modular; however 2-3K javascript in single file becomes nigthmare for maintenance and therefore was the question. Do let me know if there is a way to split controller into multiple files and share the scope. — Mothupally, Sep 13 '14 at 05:40

score 24 · Answer 1 · answered Sep 13 '14 at 05:41

Use multiple controller to handle the task in your page. If using a larg controller is unavoidable ,you can split the definition to multiple files by passing the scope to another method and then define the rest of methods there.

In the first file:

app.controller('CtrlA', function($scope){
app.expandControllerA($scope);

});

In the second file

app.expandControllerA = function($scope)
{

}

You can pass any variable or dependencies to expandControllerA function.

the second file should be loaded before the first. app should also be defined in the second file — Shorn Jacob, Mar 14 '17 at 04:35

score 3 · Answer 2 · answered Sep 13 '14 at 06:59

You can also create a base controller and use $controller service to create derived controllers.

For example:

function BaseCtrl($scope, options) {
    var vm = this;

    // code
    return vm;
}

function ChildCtrl($controller, $scope) {
    var vm = $controller('BaseCtrl', {
        $scope: $scope,
        options: { }
    });

    // extend view model
    vm.name = '';

    return vm
}

There are other ways to split controllers into separate files, check out this ng-conf video.

score 2 · Answer 3 · edited Aug 14 '18 at 07:52

You could use App.factory or app.service in your angular module, They would be more like inhereting the data in your snippet. so that you can assign the part of data outside the main controller and inherite the assigned variable in your controller.

    app.factory('name of the factory',function(){
return (data)
   )
app.controller('$scope','name of the factory', function(scope, name of the factopry

$scope.new = data;
))

How to split single controller in multiple js files in angularjs

3 Answers3

Linked