User Name:

User Email:

This information will only be saved for the purposes of communicating with those who have provided this information voluntarily regarding our services.We will never sell your name or email address to anyone.
© 2017 - First Crazy Developer (Abhishek Kumar)

crazydeveloper How AngularJS sync with browser?

Hi friend after lots of discussion about AngularJS today we will discuss the core concepts of AngularJS. First we decide the agenda of discussion

1. What is AngularJS?
2. How web browser works?
3. How AngularJS extends the browser?

We move ahead and start with the first point- "What is AngularJS?"

If we talk about AngularJS then we can say that "It is application development framework for single-page web application. This framework is developed in JavaScript to make the browser into super-browser". We can say it is like an extension of web browser. If we want to work on AngularJS we just need to include the references of AngularJS library files into out html page and start coding.

After the discussion about AngularJS  move ahead to start the second point- "How  web browser works?"

Before going to start about how web browser works with AngularJS let’s look about "What browsers do?"

Basically browsers have two responsibility:

1. Process events

2. Parse Html
    a.) Build Document Object Model (DOM)
    b.) Render the web page

We can say browser do two things they process the events and parse the html from http responses. Building atomic DOM and rendering the page. Even we can say that browsers are event processing machine. Browsers have single execution thread (per tab). It works with Asynchronous operation. They wait for an event happens and respond to it by driving the call backs for that event. Again they wait for another event happens then responder call back for that event and in that way they are implementing the observer design pattern. Observer design pattern is a design pattern where you have an event and we have the call backs that registered for the event and the even doesn't know how many call back it has and what they are but he just knows that it takes everything on the list and fires the claw backs one after the others.

In events browser work following important things:-

1. Events
    a.) Initiated by a hardware (mouse, keyboard etc.) event -- Click, Focus, Blur
    b.) Not initiated by hardware event -- DomContentLoaded

2. Observers and Callbacks

Another important work that browser do is that the parse the render HTML. When http response that contains HTML comes back on the network interface and drive browser events. Browser takes the html and parse it and construct document object model or DOM that is tree representing the elements in the HTML page and also parses the CSS and combine it with the related DOM into another type of model that is rendered by the rendering agent in the browser. The rendering agent actually runs in a separate thread alive when it is only one thread. It is quite frequently so if we change the DOM and a change the elements of the page or remove them rendering agent pick that up and it will render the modified page.

Look at the following points:

1. Parse HTML
2. Construct the Document Object Model (DOM)
3. Combine DOM with CSS
4. Render the DOM
5. Execute JavaScript on page which can
    a.) Change the DOM or CSS dynamically
    b.) Rendering engine will render modified DOM.

Now after all of the above discussion we move ahead and start the main important point - "How AngularJS extends the browser?"

Before going to start this discussion I remember the browsers do two things for a living. They process events and parse render HTML. Now we start with these two points where Angular get control and enhances the browser and extends the browsers. Here we have an import question-" Where Angular gets control?"

Angular get control with the following points:-

1. Extends the browser event loop
2. Extends the browser parser

Look at the following image:

In the above image we can see there is a native section is the browser where events queue are listed and when the events fire they drive JavaScript call backs ordinary the jobs could call back they go and modify the DOM and the browser render the modified DOM elements. But in Angular case all the call backs which put on the event queue that are relevant to Angular have the $apply function. So in that case when the event fires because into the JavaScript context in job which does processing JavaScript runs the $apply function and goes into the AngularJS context scope and here again AngularJS modified the DOM and then after rendered by the native browser.

We should know the following important points regarding Extend Browser event loop with AngularJS

1. Native callback issues $apply () -- (Angular page elements are not native page elements like input, checkbox, etc. and Angular directives like ng-click, etc.)
2. $apply enters angular context
3. $digest loop runs against a scope

Now let's talk a little bit about the $digest loop

1. Angular Watches
    a.) The observer pattern
    b.) Dirty Checking

2. $evalAsynch()
    a.) Function to run on next $digest cycle
    b.) Instead of browser setTimeout()

3. Angular context runs against an angular scope

4. $digest runs iteratively until DOM is stable.

If we go through the above image we can see $digest loop has basically two sub loop:-

1. $watchlist
2. $evalAsync

Basically $watchlist is observing the elements in the scope and work with the observer pattern and dirty check. $evalAsynch give guaranteed to run all these functionality which defined into it on the next $digest cycle. It is great substitute of setTimeout which is a browser construct.

We have already knew that there are two way through which AngularJS extends the browser one is the event loop which we just discussed and the other way is extends the parser.

Angular Extends the Browser Parser

1. Browser parser does not parse tags it doesn't know
2. Angular parser parses Angular directives
    a.) ng-directive ( e.g. ng-click, ng-class, etc.)
    b.) user defined directives

3. Angular parser sets watches
    a.) On page elements (input, checkbox, etc.)
    b.) On interpolations {{..}}

By default browser doesn't parse the AngularJS tag so if we have angular tags and we don't have any angular context in that case those tags will just be ignored.

Look at the following image which will help to understand the Angular Parser with the browser.

Browser load the http response content and build the DOM. After finishing the DOM elements issue the Dom content loaded event. Angular if there is ng-app directive on the page register them self as a call back on the DOM content loading event. Then after $compiler runs and it looks for Angular directives in the page and build HTML based on the directives and merge into the DOM.

Angular Compiler

1. Gets control after DomContentLoaded event
    a.) Or when a logical page is activated for first time
        >> The compiled page is cached in a templateCache
    b.) Or when we issue $compile ()
        >> Against any HTML that includes Angular directives

2. $compile locates Angular directives

    a.) Generates HTML from the directive which gets inserted in the page
    b.) Generates a link () function
        >> Link functions run against a scope
        >> Scope is not available at compile time

Summary of all discussion

1. AngularJS is a framework for developing single page web application

2. AngularJS extends the web browser by:
    a.) Intercepting the browser's event-processing loop
    b.) Enhancing the browser's HTML parsing

Enjoy and happy reading:


crazydeveloper Home Page 29 December 2015

Become a Fan