Apr 3, 2014

Aliasing angular key concepts

AngularJS is a single page application framework. Although, it never markets itself as a "MVC" framework, it uses lots concept of MVC, like model, view, controller. Once you start using it, you will find the concepts it use does not map 100% to your concepts. So I feel that I need to alias these key concepts to align to my understanding. If you don't understand these concept correctly, you can use them in a wrong way very easily, because AngualrJS allow you to do so. In the following, I try to explain them by giving each of them an alias. Although an alias is not trendy, but at lease it helps me to understand. Hopefully, it helps you too.

service : injectable singleton

The term "Service" is a used every where, it means different things to different people in different context. AngularJs uses dependency injection to create almost all the reusable objects. Angularjs call this kind of object service. So the name service is probably not your concept of service, technically service is injectable singleton. It can be a piece of data, a method, or anything. A injectable object has lots of benefit, such as it is easy to test, customize, extend. In a word, angularjs recommend you to create all your reusable of "things" as service. The following artifacts such directive, scope, controller everything is kind of "service" internally in angularjs.

directive : behavior builder

AngularJS turns a static html document into an application. The application is still composed by DOM elements, but these elements has behavior. When the page loaded, AngularJS parsed the html document recursively for some special tag, attribute, or class name which map to something called "directive", which attach behavior to the DOM elements. The behavior can be reflected as the following.

  • Handle data event of scope, and change DOM
  • Handle DOM event, and change the data of scope
  • Handle change event of scope, and change other data of scope. This is not good practice, you can do it by other means
  • Handle DOM event, and change DOM. This is necessary sometimes, but it is not a good practice in general.

scope : model context

On the view site, there is DOM, which is a tree of html elements and attributes. On the model side, there is scope which is organized as tree. Angularjs attach each DOM element with a scope, so scope is like a context to describe model. When you stand on a DOM node, and talk about a model concept such as "customer", the concept "customer" is within a context (scope). When you stand on another node, the same concept of "customer" may or may not be the same thing depending on the whether two node sharing the same context (scope)

  • The most important functionality of model context is change detection. When data change, implement behavior in directive.
  • Expose read/write access to data to view.
  • Generate custom data event which can be passed up to ascendant model contexts
  • Generate custom data event which can be passed down to descendant model contexts

controller : scope builder

A DOM element is associated with one and only one scope. This scope can be inherited from the scope of parent DOM element, or it can be explicitly created by directive ng-controller or other directive. Directive ng-controller is implemented by module.controller() method. Other directive which create a new scope is implemented by module.directive