0

I have a web app that I'm building in AngularJS. It has accumulated 500 lines of code and is quite a burden to sort through it all. I was wondering if it would be possible for me to break off the logic into multiple files but still be able to interact with some of the $scope variables. Any resources on this topic would be appreciated.

Ex: I have a bunch of logic dealing with tables generated by ng-repeat that doesn't need to interact with code from graphs that I'm generating using Canvas.JS

Sleep Deprived Bulbasaur
  • 2,368
  • 4
  • 21
  • 33
  • 2
    500 lines of code globally doesn't sound that much for an AngularJS app.. – Lorenzo Marcon Jul 16 '14 at 14:12
  • @LorenzoMarcon it's hard for other people in my organization to "come on" and help me when there is a time crunch, plus I would like to implement best practices if practical. – Sleep Deprived Bulbasaur Jul 16 '14 at 14:14
  • I use separate folders for separate types of constructs, for example, i'll have one for each fo the following: directives, controllers, services, and scripts. scripts is used for externally included modules and for angular.js itself, the other three are self explanatory. Then, within each folder, i have a separate files for different parts of the application. I use grunt to concat/minify all of the files and publish to a build folder. – Kevin B Jul 16 '14 at 14:14
  • 1
    @SleepDeprivedBulbasaur I know, I didn't mean to be unpleasant.. but maybe if your (or your colleagues') code is messy after 500 lines, maybe you need to refactor / redesign the project structure first, which is your purpose If I got it right. The links in the answer below will surely help you – Lorenzo Marcon Jul 16 '14 at 14:23

3 Answers3

1

These articles might help you:

Also read this answer.

I mostly choose the Modular approach.

Community
  • 1
  • 1
Danilo Valente
  • 11,270
  • 8
  • 53
  • 67
0

Did you code all your app in a single controller?

I would think about:

  • Having an skinny controller (only exposing the scope content needed, and grabbing the content from services).

  • Implement services (Factories), in this factories you can for instance encapsulate your $http request to get the data you want to show.

  • Implement directives: e.g. if you are building a common chart, you can encapsulate it in a directive (it's like a control), is easier to maintain and reuse.

Once you have that I would jump into Danilo great suggestions.

Braulio
  • 1,748
  • 14
  • 23
0

Another link that might help you:

It's about a solution with RequireJS to partition the application in multiple modules that can be hooked together very easy.

leog
  • 778
  • 10
  • 15