Apologies for the awkward question title, if anyone can suggest a better way to phrase it, I'm open to changing it immediately.
In the process of developing an app using Angular and RequireJS with a focus on performance optimization, dependencies, and lazy-loading, I am aiming to create a file structure as outlined below:
/app
----/registration
--------_registration.module.js
--------registration.ctrl.js
--------registration.svc.js
--------registration.directive.js
----/courses
--------_courses.module.js
--------courses.directive.js
--------courses.controller.js
--------courses.service.js
--------/course
------------course.controller.js
----/admin
--------_admin.module.js
--------admin.controller.js
When setting up routing, my goal is to have users loading the _registration.module.js file in its entirety when they navigate to any /registration/ view. This would involve concatenating all the other .js files within the /registration directory (including subdirectories) to streamline dependency management and serve each section of the site comprehensively to users without unnecessary duplication. The example above illustrates why preloading all files may not be ideal, especially considering that most users may never access the admin section. I am currently exploring ways to achieve this efficiently using grunt, but the manual process I'm employing involves code such as:
grunt.initConfig({
concat: {
app: {
files: [
{
src: ['..app/registration/*.js', '!..app/registraion/*.module.js'],
dest: '..app/registration/_registration.module.js'
},
{
src: ['..app/courses/*.js', '!..app/courses/*.module.js'],
dest: '..app/courses/_courses.module.js'
},
{
src: ['..app/admin/*.js', '!..app/admin/*.module.js'],
dest: '..app/admin/_admin.module.js'
}
],
}
},
});
I believe there must be more efficient and automated methods to achieve this objective. Any suggestions are welcome!