It is time we get a deeper understanding of the
AngularJS life cycle

WHY?
When building complex AngularJS applications,
it is important to understand how AngularJS
accomplishes much of its magic
I. Preparation
II. Compile & Link
III. Render
IV. Digest Cycle
I. Preparation I. Preparation
A. Load CSS and JS files along with the Application Code
B. Document ready event is fired
C. Bootstrap: AngularJS searches for ng-app attribute in the HTML
II. Compile & Link II. Compile & Link
A. Compile: AngularJS searches for directives
B. Directive code is executed
C. Link function is generated for each directive
D. Link function is combined with the scope
E. Variables in scope are displayed in the UI
What?

- The $compile service collects all the directives then combines all linking functions into a single function

- The link function attaches the scope to the DOM
III. Render III. Render
A. Controllers are instantiated with own scope
B. Watchers and Listeners are added
C. UI is now interactive
IV. Digest Cycle IV. Digest Cycle
A. Event is triggered
B. Digest Cycle is run
Digest Cycle = Angular's own event loop I. Preparation
II. Compile & Link
III. Render
IV. Digest Cycle