如何构造大型AngularJS应用程序

Question

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

Answer 1

These articles might help you:

• http://briantford.com/blog/huuuuuge-angular-apps
• http://cliffmeyers.com/blog/2013/4/21/code-organization-angularjs-javascript

Also read this answer .

I mostly choose the Modular approach .

Answer 2

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: eg 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.

Answer 3

Another link that might help you:

• http://leog.me/log/large-angularjs-app-components

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