AngularAtom—Component-based organization for AngularJS 1.x apps (Part 3)

December 12, 2014

Level 2 organization

Now we are ready to start reviewing organization structure at the second level. If you’ve missed my previous posts, recommend reading them first before continuing further:

app/ folder

In this post we’ll examine organization of the app/ folder. Since the app/ folder contains user generated application code, we divide it like this:

  • components/—container for all user written application components (more on components…)
  • layouts/—container for the layout definition partial files (more on layouts…)
  • states/—container for all application UI states (more on states…)
  • app.js—defines main application module and lists dependencies on components and states modules
  • index.html—this is the application main entry point. This is where ng-app directive and top level ui-view are placed. The latter creates a placeholder inside the <body>...</body> block that abstract states can load layouts to.

We’ll look into organization of each of these folders in more detail when we examine organization of the third level in the next post.

The rest of the folders located at the second level of the application root have either a standard package-managed (e.g. bower_components, node_modules) or flexible organization, so we won’t be covering them here.

As always, please feel free to comment on this post below.

Today my environment was:

  • Angular 1.3.5
  • AngularUI Router 0.2.12
  • Mac OS X 10.10.1