Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Controller Code Organization in Angular

Tags:

angularjs

So, I'm in the midst of my first major project with Angular. I have one controller that is doing a ton of the legwork, and it's reached the point where it's thousands of lines of JavaScript.

I'd like to break this up somehow, but I can't seem to find a solid example anywhere. The code is mostly made up of functions used to do calculations on objects, so directives and modules don't seem like the right answer, but I could be wrong there.

How are you guys organizing code in your large Angular projects? Should I just suck it up, or is there a sane way to split this into easy to scan files?

like image 892
jbarket Avatar asked Aug 30 '12 13:08

jbarket


People also ask

What is MVC structure in Angular?

Model − It is the lowest level of the pattern responsible for maintaining data. View − It is responsible for displaying all or a portion of the data to the user. Controller − It is a software Code that controls the interactions between the Model and View.

What are the controllers in Angular?

The controller in AngularJS is a JavaScript function that maintains the application data and behavior using $scope object. You can attach properties and methods to the $scope object inside a controller function, which in turn will add/update the data and attach behaviours to HTML elements.

What is the architecture used in Angular?

The architecture of an Angular application relies on certain fundamental concepts. The basic building blocks of the Angular framework are Angular components that are organized into NgModules. NgModules collect related code into functional sets; an Angular application is defined by a set of NgModules.


2 Answers

I suggest putting at least some of those objects and their related calculations into services, then inject the services into your controller(s). See the Sticky Notes Part 1 blog entry for an example of a service that encapsulates some data and provides methods to access/manipulate that data.

See if you can break up your controller into multiple controllers, one for each view. A view can be as large as a page, or just some chunk/block on a page.

To quote from a google group post I saw recently: "I prefer to think of angular controllers as dumb apis/configs for my views and leave all the heavy lifting to services." -- reference

like image 74
Mark Rajcok Avatar answered Oct 06 '22 19:10

Mark Rajcok


There are a few things that you need to ask yourself when you are in a controller.

  1. Are you doing any DOM manipulation in the controller? This is a definite NO. Dont ever do that. It always belongs in the directives department.

  2. Are you writing any Business Logic in your controller? That too is a NO. Your Business logic should in most cases exist in a Service. That is the right place for it.

Now, have a look at your controller. Is it devoid of these 2 things and still larger than 1000 lines? It is highly unlikely, but even if it somehow is happening, then consider breaking down your controller into smaller controllers. This breaking of controllers have to be done based on the view.

To sum things up, your controller is just a place where you glue up the business logic and your views in the HTML. It should technically never contain anything other than these glues.

like image 23
ganaraj Avatar answered Oct 06 '22 19:10

ganaraj