An Overview of the AngularJS Life Cycle

Angular JS may be defined as a type of structural framework for several kinds of web apps that are essentially dynamic in nature. You can use HTML as its template language and can also go ahead and extend its syntax for better expression of the components of your application in a much better way. The data-binding nature of Angular JS makes it possible to do away with a lot of codes that you would have to write otherwise. The fact that the entire thing can happen within a browser makes it extremely friendly with server technology. If you take an Angular complete course, you would get to know much more about this in time. 

Now that you have understood the basis of Angular JS, it’s time to delve into the three stages of its life cycle – Bootstrap, Compilation, and Runtime. If you understand the phases properly, designing and implementing the codes in Angular will also be a cakewalk for you. The three phases we mentioned, take place every time a webpage loads in a browser. 

The Three Phases – A Closer Look

• The Bootstrap 

This is the first phase of the Angular JS Life Cycle. In this phase, the Angular JS JavaScript library gets downloaded into the browser. At first, Angular starts with the initialization of the components, which are its own. After this, your module, pointed out by the ng-app directive, gets initialized. The loading of the module becomes complete and the dependencies are injected into the module, which makes it accessible for coding inside the module.

• The Compilation

In this second phase of the Angular JS life cycle, the HTML compilation takes place. At first, when you load a web page, the DOM gets downloaded into the browser in a static form. When the compilation starts, this static form is then converted to a dynamic form, representing the Angular JS view.

This phase again has two parts:

• Changing the static DOM
• Collection of all the directives and thereafter linking these directives to the relevant Javascript functionality from the built-in library of the Angular JS or customized directive codes. These directives, in turn, work in combination with a scope that essentially produces the live or the dynamic view.

The Runtime Phase

This last and final phase of the Angular JS life-cycle exists until the webpage is reloaded or the user navigates away from it. During this time, any change that occurs in the scope shows in view, and all changes in the view get synced within the scope. As a result, the scope becomes the only source of data, as far as the view is concerned.

If we compare it with other classic modes of data-binding, the Angular JS turns out to be quite different. In the traditional methods, the template is combined with the data that is obtained from the engine. The DOM then is manipulated with every instance of change in data. On the other hand, Angular JS gets the DOM compiled just one time and then creates a link with the compiled template as required. This essentially makes Angular JS much more effective and efficient than the traditional methods. 

So now that you are aware of the basics as well as the different phases of the Angular JS Life cycle, coding should be much easier than ever before.