Angular-Sprout: The scalable Angular seed App (Updated)

It's been a moon or three since I presented the original Angular sprout app at Google. Over the years, I've deployed angular sprout in projects for HBO, Morgan Stanley, NASA(ish) and my little cousins cat blog. Along the way I've received mountains of wonderful feedback that I've synthesized into this update. The primary changes are:

  • Flat directory hierarchy.
  • 100%(ish) module test coverage.
  • Removed platform specific scripts.
  • Updated to lastest angular.
  • Using attribute directives.
  • Probably some other things.

Angular Sprout exists to give developers the simplest possible best practices base on which to scale angular applications. It's worth noting that, though minimal, Angular Sprout is highly opinionated/controversial and is not everything to everyone, or anyone for that matter. It's simply what has worked best for me.

Running Angular-Sprout

  • Point your webserver of choice to the root.
  • Yahtzee!!

Running Tests

  • Run npm to install dev dependancies.
npm install
  • Run Karma.
karma start karma-unit-config.js

Flattened Directories

Keeping the directory hierachy flat makes it easy find files. I believe in using name convention to organize files leads to a more navigable hierarchy.

  • The major module types: controllers, services, filters, contants, directives, etc get their own folders because they end up containing many cross cutting concerns.
  • Application folders (controllers, etc...) and configuration folders (data, etc...) live at the same level in the hierarchy. Use your build tool (grunt, etc..) to prepare deployment folders.

Module files

Each instance of an angular module gets its own file. Monolithic controler, services, etc... are a potential maintenance nightmare.

Test files

Placing tests adjecent to tested modules makes it harder to ignore testing.

Namespaces

Giving each module type its own namespace off of a common one clarifies the sepeartion of concerns, preserves the global scope and saves one having to instantiate anguar modues in every file.

var Application = Application || {};

Application.Constants = angular.module('application.constants', []);
Application.Services = angular.module('application.services', []);
Application.Controllers = angular.module('application.controllers', []);
Application.Filters = angular.module('application.filters', []);
Application.Directives = angular.module('application.directives', []);

Directory Layout

constants/--> Application constants.
configuration-constants.js

controllers/
details-controller.js 
menu-controller.js

data/ --> Folder for mock data
items.json

direcives/
menu-item-directive.js 

filters/
to-datetime-string.js

libraries/ --> angular and 3rd party javascript libraries
angular.js
angular.min.js
angular-*.js

services/
menu-service.js

templates/--> All view, directive and include templates.
details-template.html
menu-template.html
menu-item-template.html

styles/
application.css

index.html--> Application layout file (the main html template file of the app)
application.js--> Application bootstrap
karma-unit.config.js--> Unit test Karma configuration files.
package.json--> Node dev dependancies.

Published on January 18, 2015 by James Wanga.