(draft) AngularJS – bird’s-eye view

by ilyavf

1. Key points
2. Relation to MVC
3. Structure (SOA)
4. File organization

Key points of AngularJS

  • DI (Dependency Injection)
  • Directives
  • Testing oriented

Dependency Injection in brief means that in our code we don’t refer to any globally available objects. Every external dependency is injected into current scope by framework’s injector. This encourages us to write modular and thus testable code with a good separation of concerns.

Angular Directive in brief is a reusable component that consists of a view and a controller, allows to augment variables and data (html/template as a content), and extends html vocabulary with new HTML tags or attributes. This idea is known in HTML5 as Web Components.

The creator of AngularJS said that the framework was designed with testing in mind. The credit of testing with ease goes to both: framework designers (who chose DI pattern which allows us to mock everything we use inside our code) and google test engineers (who built Karma and Protractor which are great tools for unit and end-to-end testing).

Relation to MVC

In the Throne of JS, conference that happened in Toronto in 2012, AngularJS team stated that their framework is MV* (star). Usually the last component of the pattern stands either for Controller or View Model or Presenter or Adapter. AngularJS does have Controllers but they are different from MVC controllers, they are more like view models or presentational models.

Always coupled with a view Angular’s controller stores:

  • view’s state (data bindings),
  • view related logic (or programming codesnips as helpers to be used inside view’s declarative logic),
  • and methods being used to handle user interactions (aka event handlers).

Also, there is no models as framework components (e.g. compared to BackboneJS models *LINK*). You have to use JavaScript native objects and arrays to store data in Angular Services. Of course you are free to use any external libraries for this, but you will found nothing out of the box.

In version 2 Angular team is planning to introduce data layer *LINK*. ECMAScript version 6  adds classes to language natives, and in Angular 2.0 we will see Model class (ES6 class) as an extensible abstraction layer on top of low-level storage and network utilities to manage fetching , caching, and querying data.

There are articles in the web *LINKS* stating that Angular is SOA  rather than MVC. Lets look at this.

Structure (SOA)

So, what are Angular’s Services and how to eat them?

Angular has a Provider component and three “sugars” to use it: Value, Factory, Service. The result of each is Angular’s “global” object that you can work with and inject into application components. Really they are either:

  • Simple values (constants, strings, numbers, booleans) – “Value”,
  • Objects with an optional predefined (during the configuration stage) scope – “Factory”,
  • or instances (as singletons) – “Service”.

From the application point of view Services are like “application brains” and store application logic and state. From here we Controllers could be seen as “View’s brains” storing a view specific state and logic.

Here is a diagram I just love (from here *LINK*):