2 years ago you Sergey asked me to create AngularJs Concept Diagram, and finally I have enough knowledge and time to do this task. Better late than never.
After many hours of going back and forth in source code of AngularJS I think I came to understanding all the concepts of framework and their interactions. So the simplified diagram is not complex at all:
All based on Dependency Injection(DI) approach and the instances of DI are AngularJS Services. The main 3 of them: Scope, Directive, Compile. Compile is a service, it’s obvious. Yes, Scope is also service. Directive constructor itself is just method of Compile service(that is linked to yourModule.directive), but when you create new directive instance it will be still a service, just with specific suffix. And controller (which is ngController) is just a directive, one from the set that AngularJS provided from the box.
Lets have a look on concepts list from official tutorial:
| Concept | Description |
|---|---|
| Template | HTML with additional markup |
| Directives | extend HTML with custom attributes and elements |
| Model | the data shown to the user in the view and with which the user interacts |
| Scope | context where the model is stored so that controllers, directives and expressions can access it |
| Expressions | access variables and functions from the scope |
| Compiler | parses the template and instantiates directives and expressions |
| Filter | formats the value of an expression for display to the user |
| View | what the user sees (the DOM) |
| Data Binding | sync data between the model and the view |
| Controller | the business logic behind views |
| Dependency Injection | Creates and wires objects and functions |
| Injector | dependency injection container |
| Module | a container for the different parts of an app including controllers, services, filters, directives which configures the Injector |
| Service | reusable business logic independent of views |
We already have DI, Compiler, Directives, Scope, Service. Let’s extend our diagram little bit:
Here I specify that DI concept is made by Injector entity. Services are grouped in modules. Base module of Angular is ng, where you could find all the “native” services and directives(I call it ngModule on diagram to make more clear). Examples of another modules provided by AngularJS are ngRoute, ngAnimate, ngSanitize, ngCookies and others.
I marked out that Scope is kind of Model in AngularJS.
View is presented like extended HTML(extended by expressions and directives). Html is analysed and compiled back with Scope data by Compile service: starting from the app root element recursively to each nested directive. Directives can use Templates which are also in extended HTML format.
I think that the concepts like digest and watchers are unfairly skipped in the main list. Let’s look at Scope concept in detail:
Each Scope instance ($scope on diagram) has array of watchers, $watch() method to add new watcher and $digest() method to control the watchers.
We have array of watchers, but what is watcher itself?
Watcher is just an object with 3 basic properties:
- listener – observable entity (could be object property, expression(string) or function)
- old value – stored value to compare with new one
- callback – function to call in case if output of listener and old value do not match
So watcher is just an object with special properties. All operations over watchers are executed by $digest method. It goes threw all the watchers, compare values: stored and listener actual and execute callbacks if the values are not equal.
And now we come back to general diagram:
I’ve added last concept from the list – Data Binding. It’s made on watchers. Each view binding with a scope – it’s just one more watcher to the watchers list of this scope(or two watchers in case of Two Way Binding). When some of scope properties have been changed it will make corresponding watchers “dirty” – it means that listener value and old value are not equal now. And with new digest cycle ($digest method call) dirty watchers will be updated(and their callbacks will be executed). Digest cycle will last till all the watchers are clean. That why it has well known name “dirty checking”.
I tried to put all the concepts with their dependencies on diagram and keep it as clear as possible. Hope it will be helpful for you.