How AngularJS Works – Explained with Angular Code

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.