Repeat Coding in Controller - whats the better way to do it?

[Satish B]

I'm relatively new to angularjs.

I'm using node.js and angular.js

I've 5 services(which fetch data from node server) - services.js (angular service)
Inside my controller.js file I've 20 controllers. In 15 controllers I make use of the same 5 services and some repeat functions(to get data from view/user submission).

In each controller, there is only 1 service which is specific to the controller, all other code is just repeat of same stuffs in all other controllers.
Everything is working great. But the problem is, the code is growing bigger and it feels like am doing something wrong as there is a lot of repeated code.

My question is:
Can I take out the repeated stuffs, put it somewhere like a function and call it inside each controller, in 1 line? I know, I can't make it a function - I dint get a better way to explain it, so putting it that way, so that you people can understand what I'm looking for.

[Sander Elias]

Hi Satish

You should really read through a style guide, a lot will fall into place for you.

First of all, all JS files should just hold a single entity. an entity being a controller, a directive or a service. 

You should not be writing repeated code, there is no need for that. There are quite a number of ways to take care of that, and keep

your code neat and DRY.

You can put the repeated code into a service, of a utility function. (yes you can have functions inside angular!)

More questions? just ask them!

Regards

Sander

[Satish B]

Sander,

I had read this long back - put "Define 1 component per file."
But my project has atleast 30 controllers and 30 factory methods. The no of files might grow even further very soon.

I'll have to link them all to the index.html page! Doesn't it look awkward? And is that the actual way to do stuffs?

Ya, functions are permitted in angular and I've plenty of them. But I want to have a single function which is accessible from all controllers!

I can't(probably) write a factory method and inject it into each controller. Because these repeat codes are factory methods and some functions which get values from view. I want to take out all those repeat code and put it in one place and include it inside each controller - just like a method call.

..feeling confused!

[Sander Elias]

Hi Satish,

As I said, read trough the style-guide I included, it gives an practical answer on most of your questions.

You can have lots of files, that's not a probblem, you should be using a build tool like gulp or grunt. 
A tool like that will give you the possibility to combine all the little files in 1 large file. Just link the 1 large file in your page, and be done with it.

On my application I usually have an appController, that sit's on the outer limit. It's kind of an personal $rootScope for my applications. A function like you describe can be placed in there, and be available everywhere!

here is a small sample for you, does that help?

Regards

Sander

[Satish B]

Thanks Sander. Am reading the style-guide. I'm not yet able to write a function and index it inside a controller. But thanks for the reference, I'll do trail and error all night and try to understand it.

Thanks a lot once again.. :)

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/qh62v0WEq7c/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[Nicholas Smith]

I'm at a similar scale, I've got approx 30 javascript files that make up my project.  Part of my build process is the javascript all gets concatenated into one file and minified (I'm using Closure compiler but there are other ones available), so in the end I have one javascript file to send to the browser.  I think that's also covered in the style guide, recommend all javascript code goes through a compile / obfuscation phase before deployment. 

[Satish B]

I'm still struggling to make it work that way :(

Here is my sample code:
------------------------------

---------------------------------------------------------------------------------------
'use strict';

myApp.controller('First', ['$scope', 'Users', 'Assign', function($scope, Users, Assign){
        Users.users(function(results){
            $scope.users = results;
        });

    $scope.fn = function(id, n1){
        $scope.n1 = n1;
        $scope.id = id;
    }

    $scope.ln = function(){
        Assign.assign(function(results){
            $scope.work = results;
        });
    }
}]).controller('Second', ['$scope', 'Users', 'Lang', function($scope, Users, Lang){
        Lang.langs(function(results){
            $scope.lang    = results;  
        });
        Users.users(function(results){
            $scope.users = results;
        });
   
    $scope.fn = function(id, n1){
        $scope.n1 = n1;
        $scope.id = id;
    }
}]);

---------------------------------------------------------------------------------------------------------------------



I changed above code to:

---------------------------------------------------------------------------------------------------------------------

(function() {


'use strict';

myApp.controller('First', ['$scope', 'Assign', 'separate', function($scope, Assign, separate){
      
    $scope.ln = function(){
        Assign.assign(function(results){
            $scope.work = results;
        });
    }
}]).controller('Second', ['$scope', 'Lang', 'separate', function($scope,Lang, separate){
        Lang.langs(function(results){
            $scope.lang    = results;  
        });
}]);

function separate($scope) {
     Users.users(function(results){
            $scope.users = results;
        });

    $scope.fn = function(id, n1){
        $scope.n1 = n1;
        $scope.id = id;
    }

}


})();
---------------------------------------------------------------------------------------------------------------------

I got errors with above code. I played around to make global scope. assigning this variable to a local variable etc. But couldn't make it work.
Any input on solving above problem will be very helpful.

Thanks @Sander Elias and @Nicholas Smith

[Am reading style-guide and trying my best to understand it.]

[Satish B]

Please let me know the answer for this. I'm trying my best to rewrite the code to suite the style-guide. But need answer for this for now. I'll be a great help. Thanks ..

[Nicholas Smith]

Take a look at the answer for this on stackoverflow for some guidance.  In my situation I put the shared functionality into a Factory.  You'll find an example of that as well as using the $rootScope to do it.

http://stackoverflow.com/questions/15025979/can-i-make-a-function-available-in-every-controller-in-angular