An Overview of the angularjs Life Cycle

Now that you understand the components involved in an angularjs application, you need to understand what happens during the life cycle, which has three phases: bootstrap, compilation, and runtime. Understanding the life cycle of an angularjs application makes it easier to understand how to design and implement your code.

The three phases of the life cycle of an angularjs application happen each time a web page is loaded in the browser. The following sections describe these phases of an angularjs application.

The Bootstrap Phase

The first phase of the angularjs life cycle is the bootstrap phase, which occurs when the angularjs JavaScript library is downloaded to the browser. angularjs initializes its own necessary components and then initializes your module, which the ng-app directive points to. The module is loaded, and any dependencies are injected into your module and made available to code within the module.

The Compilation Phase

The second phase of the angularjs life cycle is the HTML compilation stage. Initially when a web page is loaded, a static form of the DOM is loaded in the browser. During the compilation phase, the static DOM is replaced with a dynamic DOM that represents the angularjs view.

This phase involves two parts: traversing the static DOM and collecting all the directives, and then linking the directives to the appropriate JavaScript functionality in the angularjs built-in library or custom directive code. The directives are combined with a scope to produce the dynamic or live view.

The Runtime Data Binding Phase

The final phase of the angularjs application is the runtime phase, which exists until the user reloads or navigates away from a web page. At that point, any changes in the scope are reflected in the view, and any changes in the view are directly updated in the scope, making the scope the single source of data for the view.

angularjs behaves differently from traditional methods of binding data. Traditional methods combine a template with data received from the engine and then manipulate the DOM each time the data changes. angularjs compiles the DOM only once and then links the compiled template as necessary, making it much more efficient than traditional methods.

Separation of Responsibilities

An extremely important part of designing angularjs applications is the separation of responsibilities. The whole reason you choose a structured framework is to ensure that code is well implemented, easy to follow, maintainable, and testable. Angular provides a very structured framework to work from, but you still need to ensure that you implement angularjs in the appropriate manner.

The following are a few rules to follow when implementing angularjs:

Image The view acts as the official presentation structure for the application. Indicate any presentation logic as directives in the HTML template of the view.

Image If you need to perform any DOM manipulation, do it in a built-in or your own custom directive JavaScript code—and nowhere else.

Image Implement any reusable tasks as services and add them to your modules by using dependency injection.

Image Ensure that the scope reflects the current state of the model and is the single source for data consumed by the view.

Image Ensure that the controller code acts only to augment the scope data and doesn’t include any business logic.

Image Define controllers within the module namespace and not globally. This ensures that your application can be packaged easily and prevents overwhelming the global namespace.

Integrating angularjs with Existing JavaScript and jQuery

The fact that angularjs is based on JavaScript and jQuery makes it tempting to try to add it to existing applications to provide data binding or other functionality. That approach will almost always end up in problem code that is difficult to maintain. However, using angularjs doesn’t mean that you need to simply toss out your existing code, either. Often you can selectively take working JavaScript/jQuery components and convert them to either directives or services.

This also brings up another issue: when to use the full version of jQuery rather than the jQuery lite version that is provided with angularjs? I know that many people have strong views in both directions. On one hand, you want to keep your implementation as clean and simple as possible. But on the other hand, there might be times when you need functionality that’s available only in the full version of jQuery. Our advice is to use what makes sense. If you need functionality that is not provided with angularjs jQuery lite, load the full library. The mechanics of loading jQuery rather than jQuery lite are discussed later in this lesson.

The following steps suggest a method to integrate angularjs into your existing JavaScript and jQuery applications:

1. Write at least one small angularjs application from the ground up that uses a model, custom HTML directives, services, and controllers. In other words, in this application, ensure that you have a practical comprehension of the angularjs separation of responsibilities.

2. Identify the model portion of your code. Specifically, try to separate out the code that augments the model data in the model into controller functions and code that accesses the back-end model data into services.

3. Identify the code that manipulates DOM elements in the view. Try to separate out the DOM manipulation code into well-defined custom directive components and provide an HTML directive for them. Also identify any of the directives for which angularjs already provides built-in support.

4. Identify other task-based functions and separate them out into services.

5. Isolate the directives and controllers into modules to organize your code.

6. Use dependency injection to link up your services and modules appropriately.

7. Update the HTML templates to use the new directives.

Obviously, in some instances, it doesn’t make sense to use much, if any, of your existing code. However, by running through the preceding steps, you will get well into the design phase of implementing a project using angularjs and can then make an informed decision.