Modular AngularJS + RequireJS Seed Project
For the impatient: Skip reading this post and jump directly to the AngularJS + RequreJS seed project.
To help folks get started with AngularJS, the Angular community has put together a number of nice seed projects. Some of these seed projects make use of RequireJS to manage script loading and modularization, others do not. Most however do not attempt to present a clean modular layout, instead they remain fairly monolithic and leave much of the design / decision making to the developer.
This isn’t necessarily a bad thing… We developers enjoy the freedom design. However, for folks looking for a bit more direction, I’ve extended the current seed projects to provide a more modular layout.
In this post, I present a new seed project that marries AngularJS and RequireJS, yet also provides a structure very conducive to modularization. This seed project is based on previous seed projects (e.g. angular-seed), yet breaks the monolithic mold, and instead goes on to demonstrate how custom Angular components including controllers, services, directives, filters, and routes can be constructed and implemented using dedicated files. This seed project provides a structure capable of supporting large and growing AngularJS based applications.
To get started with my modular AngularJS + RequireJS seed project, go here .
The project resides on github at https://github.com/cdimascio/ya-angular-requirejs-seed.
The following README describes how to get started with this AngularJS + RequireJS seed project.
The overall project structure for this seed is as follows:
Some background info on AngularJS and AMD or RequireJS:
“Angular modules don’t try to solve the problem of script load ordering or lazy script fetching. These goals are orthogonal and both module systems can live side by side and fulfil their goals“. source: Angular JS official website.