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:

app/                        --> all of the files to be used in production
  css/                      --> css files
    style.css               --> default stylesheet
  img/                      --> image files
  index.html                --> app layout file (the main html template file of the app)
  js/                       --> javascript files
    controller/             --> application controllers
        my_controller1.js   --> controller1 impl
        my_controller2.js   --> controller2 impl
    directive/              --> application directives
        version_directive   --> version_directive impl
    filter/                 --> application filters
        version_filter      --> version_filter impl
    service/                --> applicaiton services
        version_service     --> version_service impl
    app.js          --> angular application
    boot.js         --> bootstrap logic - requirejs setup and boot
    controllers.js  --> application controllers
    directives.js   --> application directives
    filters.js      --> custom angular filters
    services.js     --> custom angular services
    routes.js       --> custom angular routes
  partials/         --> angular view partials (partial html templates)
    partial1.html
    partial2.html

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.

Thanks!