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
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.
- Agentic Reasoning Design Patterns in AI: Examples - October 18, 2024
- LLMs for Adaptive Learning & Personalized Education - October 8, 2024
- Sparse Mixture of Experts (MoE) Models: Examples - October 6, 2024
I found it very helpful. However the differences are not too understandable for me