Angularjs: how to properly organize the code of a large project?

Question

JavaScript

Hello!
Having problems organizing the code of a large project when using angularjs.
I will give an example by analogy with the angular-app architecture.
Let's say the project has 4 pages: main (main), details (details), profile (profile), admin panel (admin). The pages are completely isolated with links to each other. In other words, the project is not a single page.
directory structure is like this:

app
---main
-----main.js - модуль
---details
-----details.js - модуль
---profile
-----profile.js - модуль
---admin
-----admin.js - модуль
app.js

Sample app.js code:

angular.module('app', [
    ‘main’,
    ‘details’,
    ‘profile’,
    ‘admin’
])

Then a single project js file build.js is assembled (including common directives, services, resources, etc.) and connected to each page.

1. How to deal with code redundancy in this approach, because a layer of code and other pages is connected?
2. How to protect the project from the situation when services/controllers are accidentally redefined in several modules (when different programmers work on different modules)?
3. With the growth of sections of the site, build.js will also swell, will this be the cornerstone in the end?

Please share your experience.

Answer 1

As far as I understand, there is an active discussion of this issue in the developer community now: blog.angularjs.org/2014/02/an-angularjs-style-guid...
There is also a link to a document describing the typical project structure.

Answer 2

Angular best practices