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

December 02, 2014

Introduction

Many of us started the Angular journey by reading the official docs at www.angularjs.org and following their online PhoneCat app tutorial. I personally think this is a very good tutorial giving an immediate exposure to the various important concepts of Angular 1. The code is organized by type where all controllers are placed into one controllers.js file, all directives are placed in directives.js, services in services.js and so forth.

Though, this type-based organization works just fine for the small short-lived apps, IMHO, it has some serious flaws for any medium or large application that needs to be maintained over time (a.k.a any production app):

  • Coupling of various components that belong to different app features
  • Difficult to locate a particular piece of code related to a given type of functionality
  • Hard to identify all feature related code and reuse it with other apps
  • The files grow longer and longer as more controllers, services etc. being added
  • No clear view into what the application is and what it really does
  • Not web-component friendly (think of Angular 2.0)

In the next few posts, we’ll try to overcome these shortcomings by learning about component-based organization named ‘AngularAtom’ that groups various web resources around a particular component instead of grouping them by type. We’ll take the original type-based tutorial and reorganize it to be a component-based Angular PhoneCat app tutorial. This will also help us to get our mind set on the component oriented development today and be better prepared when Angular 2.0 hits the prime time.

The future posts on this topic will be announced via Twitter, so make sure to to be notified when that happens.

tl;dr

For those, who want to see the end result now. Each section of the suggested structure below will be discussed in the future posts in detail.

AngularAtom organization follows the LIFT principle coined by John Papa:

  • L - Locate code easy
  • I - Identify code at a glance
  • F - Flat structure as long as we can
  • T - Try to stay DRY

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

Today my environment was:

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