How to split single controller in multiple js files in angularjs

angularjs controllers
Mothupally picture Mothupally · Sep 13, 2014 · Viewed 13.5k times · Source

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.

Answer

Alborz picture Alborz · Sep 13, 2014

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.

Related questions

AngularJS: lazy loading controllers and content

In this simplified scenario, I have two files: index.htm, lazy.htm. index.htm: var myApp = angular.module('myApp', []); myApp.controller('embed',function($scope){ $scope.embed = 'Embedded Controller'; }); <div ng-controller="embed">{{embed}}</div> <div ng-include="…

Read More
Angularjs, passing scope between routes

I have a situation with a form that stretches over several pages (might not be ideal, but that is how it is). I'd like to have one scope for the entire form that gets filled in as you go along, …

Read More
How to include/inject functions which use $scope into a controller in angularjs?

I am trying to include a library of functions, held in a factory, into a controller. Similar to questions like this: Creating common controller functions My main controller looks like this: recipeApp.controller('recipeController', function ($scope, groceryInterface, ...){ $scope.groceryList = []; // ...etc... /* …

Read More