Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

How AngularJS Works – Explained with Angular Code

DZone's Guide to

How AngularJS Works – Explained with Angular Code

· Web Dev Zone
Free Resource

Get deep insight into Node.js applications with real-time metrics, CPU profiling, and heap snapshots with N|Solid from NodeSource. Learn more.

The article is first in the series of articles that are aimed to present the angularjs in a holistic perspective (by presenting angular code side-by-side) thereby representing How AngularJS works. While talking to various developers doing both, UI and server-side programming, one thing that came out as common is the fact that AngularJS has a deep learning curve.

Keeping some of the issues/concerns shown by different classes of developers in relation with learning AngularJS, following are some of the areas that shall be explored in detail:

  • Overall AngularJS initialization & rendering process
  • AngularJS as a Dependency Injection framework
  • Scope & key APIs
  • Directives
Lets look at first part in this article, e.g., AngularJS initialization & rendering process. The function/methods listed below could be accessed in angular.js (unminifed version) file.


AngularJS Initialization & Rendering Process

Following are key method invocations that happen as part of initializing angular app and rendering the same.

  • angularInit method which checks for ng-app module
  • bootstrap method which is invoked once an ng-app module is found. Following are key invocations from within bootstrap method:
    • createInjector method which returns dependency injector. On dependency injector instance, invoke method is called.
    • compile method which collects directives
    • Composite linking method which is returned from compile method. Scope object is passed to this composite linking method
    • $apply method invoked on scope object finally does the magic and renders the view.

It all starts with a self-executing anonymous function that looks like following:

(function(window, document, undefined) {
<!-- 
here goes entire AngularJS code 
including functions, services, providers etc related code goes here 
-->
if (window.angular.bootstrap) {
    //AngularJS is already loaded, so we can return here...
    console.log('WARNING: Tried to load angular more than once.');
    return;
  }

  //try to bind to jquery now so that one can write angular.element().read()
  //but we will rebind on bootstrap again.
  bindJQuery();

  publishExternalAPI(angular);

  jqLite(document).ready(function() {
    angularInit(document, bootstrap);
  });

})(window, document);

In the code above, following points could be noted:

  • bindJQuery(): Either one of jQuery or jqLite is bound to angular.element prior to initialization process. You may want to note that angular.element acts as an alias to jQuery if it is available or delegates to Angular’s built in subset of jQuery. For all practical purpose, all element references in Angular always wrapped with either jQuery or jqLite.
  • angularInit(document, bootstrap): Angular initialization process kicks in in form of a call to angularInit method which is passed with parameters such as document element and bootstrap status
  • bootstrap(element): If an element is found with ng-app directive, then bootstrap method is invoked. As part of invocation of bootstrap method, following key activities are done:
    • Check whethar the element with ng-app is already bootstrapped. There can be cases where one could try to manually bootstrap the element with ng-app after automatic initialization is done. This is where it helps.
    • Retrieve dependency injector for the module to be loaded.
    • The dependency injector invokes the compilation and linking process with some of the following key parameters:
      • Scope object – Reference to rootScope
      • Reference to element with ng-app
      • Compile service
      • Reference to dependency injector
  • compile(element): The element with ng-app directive is then passed to compile service. The compile service returns composite link function which primarily comprises of linking function for all the directives that are collected as a result of compilation.
  • compile(element)(scope): The composite linking function is then passed with the scope object.  In the linking phase, the compiler will look for every directive and creates the watchers ($watch) that are needed.
  • scope.$apply(function{}): Finally, the $apply method is invoked on the scope object. As a result of execution of $apply method, the view appears.

You may want to check this page for detailed understanding on scope.$apply, scope.$digest and $scope.watch which makes the magic happen.

Please feel free to comment if you find discrepancy with above explanation. It is actually, work in progress. I am actually in debugging mode with Angular.js while I am writing this blog.:-)


Node.js application metrics sent directly to any statsd-compliant system. Get N|Solid

Topics:
java ,html5 ,how-to ,javascript ,tips and tricks ,html & xhtml ,angular.js

Published at DZone with permission of Ajitesh Kumar, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}