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 Bootstrap Phase
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.
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:
The view acts as the official presentation structure for the application. Indicate any presentation logic as directives in the HTML template of the view.
Implement any reusable tasks as services and add them to your modules by using dependency injection.
Ensure that the scope reflects the current state of the model and is the single source for data consumed by the view.
Ensure that the controller code acts only to augment the scope data and doesn’t include any business logic.
Define controllers within the module namespace and not globally. This ensures that your application can be packaged easily and prevents overwhelming the global namespace.
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.
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.