I'm new in AngularJS and I'm doing a refactor of an AngularJS application and I noticed that there is a single controller file with a lot of functions that manipulate and set scope variables.

Following an example:

test.controller('testCtrl', function testCtrl($scope) {

    $scope.init_filters = function() {
        $scope.filter_1 = [];
        $scope.filter_2 = [];
        $scope.filter_3 = [];
        $scope.filter_4 = [];
        $scope.filter_5 = [];
    };

    $scope.showChanges = function() {
        if ($scope.item_list.length > 0) {
            $scope.messages = [];
            for (var i = 0; i < $scope.item_list.length; i++) {
                $scope.messages.push($scope.item_list[i].message);
            }
            $scope.another_function();
        }else{
            // other stuff
        }  
    };

    //other functions like these

}

So, I would like to split these functions in multiple JS files. I searched about this problem and I found that in a lot of case is used a service. But I think that this is not my case, because I need to working on directly on the controller's scope.
I mean, I don't want a separated function that get as parameters some scope variables and return the variable.

So, what is the best practices for doing something like this? is it possible?

I'm new in AngularJS and I'm doing a refactor of an AngularJS application and I noticed that there is a single controller file with a lot of functions that manipulate and set scope variables.

Following an example:

test.controller('testCtrl', function testCtrl($scope) {

    $scope.init_filters = function() {
        $scope.filter_1 = [];
        $scope.filter_2 = [];
        $scope.filter_3 = [];
        $scope.filter_4 = [];
        $scope.filter_5 = [];
    };

    $scope.showChanges = function() {
        if ($scope.item_list.length > 0) {
            $scope.messages = [];
            for (var i = 0; i < $scope.item_list.length; i++) {
                $scope.messages.push($scope.item_list[i].message);
            }
            $scope.another_function();
        }else{
            // other stuff
        }  
    };

    //other functions like these

}

So, I would like to split these functions in multiple JS files. I searched about this problem and I found that in a lot of case is used a service. But I think that this is not my case, because I need to working on directly on the controller's scope.
I mean, I don't want a separated function that get as parameters some scope variables and return the variable.

So, what is the best practices for doing something like this? is it possible?

• javascript
• angularjs
• angularjs-scope

• if you want to follow a modular approach. Coffee-script with grunt allows to do it. Please have a look at this package https://github./gruntjs/grunt-contrib-coffee – Farooq Ahmed Khan Commented Jan 16, 2017 at 10:38

3 Answers 3

If you want to use multiple files then split the definition to multiple files by passing the scope to another method and then define the rest of methods there.

File1

app.controller('CtrlOne', function($scope){
app.expandControllerCtrlOne($scope);

});

File2

app.expandControllerCtrlOne = function($scope)
{

}

Check this video

As you said the code you found for controller is large one so there are multiple ways in angular js that you can implemented the separation of code.

I will suggest you to go with following approach:

1. Use service to add those code in it which you need in other places as well and you know that this code does not require scope object..

2. Use factory to add some Utility kind of functions. The collection of logic which does not require scope object again...

3. As controller code is too large, I think View/UI of same also being as per wrote... So for this you can go with creating directives for section in view.. Where-ever you think this peace of view section can be separate and standalone logical functionality that you can move into directive. There are three ways to create directive with scopes:

A. Shared Scope B. Isolated Scope C: shared and Isolated scope

In this ways may you can at-least make your controller code readable and looks modular.

Let say::

module.controller('longRunController', function() {


    @TYPE 1 code
    // some code which fetch dat from API
    // some code which save variable and objects which can used in another controller or directives
    // some code which need to passed to other controller even after route changes


    @TYPE 2
    // some code which is only related this controller but has some bussiness logic
    // some code which is a kind of utility functino

    @TYPE 3
    // all $scope related variable $watch, $scope and related variables
    // some code of perticular section of which VIEW which handle by this controller

});

Consider in above patter your controller code has:

1. So type 1 code can be moved to Service
2. type 2 code can be moved to factory
3. type 3 code can be move to directives

you can pass $scope as a parameter to the external function. And because you just use the objectreference, all changes you made in your external functions are made on the $scope object from your controller.

test.controller('testCtrl', function testCtrl($scope) 
{
   showChanges($scope);
});


...

function showChanges(scope)
{
    scope.param1 = "Hello World";
}