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:
- AngularAtom Component-based organization - Introduction (Part 1)
- AngularAtom Component-based organization - Level 1 Organization (Part 2)
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 modulesindex.html—this is the application main entry point. This is whereng-appdirective and top levelui-vieware 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