(draft) AngularJS Architecture

by ilyavf

First time I heard about AngularJS was from “Throne Of JS” conference in Toronto back in 2012. Angular team claimed their project MV* (star) framework. Since then AngularJS released their 1.0.0 version and became one of the most popular JavaScript frameworks. And now we are looking forward to version 2.0.

I am really interested in the architecture of AngularJS applications and in this post I am just trying to settle a view of the subject for myself.

The article about Angular architecture that inspired me to write this post: “Angular.js Large Scale Architecture and StarCraft“. I will be using this one as the first source for this post.

The most interesting implementation of Angular app I ever met was this one with RequireJS: “Thomas Burleson Angular and RequireJS“. I would like to create a yeoman generator for this pattern (yeoman).

Unique features: Directives and DI (Dependency Injection)

Key points: DI, Directives, Testing oriented.

Modularity: “features are in a take-it-or-leave-it single package”. You incur the download price for every piece whether you use it or not.

AngularJS Structure:

  • Services (application brain): Logic + State
  • Controllers (mini brains – less capable, and responsible of view specific tasks): Logic + State
  • Views (display, user interaction): Template + Directives + Filters

Controller:

  • is more like a View Model or Presentation Model.
  • holds “scope” object responsible for:
    • view data
    • presentation state
    • reaction behaviour
  • sets initial state values.
  • is a glue between view and services.
  • knows nothing about the view (Separation of Concerns) -> testing and reuse!
  • No imperative logic allowed.

“Angular.js isn’t really MVC. Its controllers are actually presentation models, its views are plain templates and it’s models… well.. there aren’t any, they are just plain old objects and arrays.”

“When you want to extend your application cross cutting capabilities, you add a service, a filter or a directive. And when you want to add another screen or page specific view, you can add a template/controller pair.”

Views:

  • (?) Declarative (present and react).

DI: Providers and Injectors

Plan:
– blog title idea
– article
– presentation
– generator
– echojs
– linkedin

Advertisements