- Why AngularJS?
- Understanding AngularJS
- An Overview of the AngularJS Life Cycle
- Separation of Responsibilities
- Adding AngularJS to Your Environment
- Bootstrapping AngularJS in an HTML Document
- Using the Global APIs
- Creating a Basic AngularJS Application
- Using jQuery or jQuery Lite in AngularJS Applications
AngularJS provides a very structured framework based on an MVC (Model View Controller) model. This framework enables you to build structured applications that are robust and easily understood and maintained. If you are not familiar with the MVC model, the following paragraph provides a quick synopsis to help you understand the basics. It is by no means complete and only intended to give you enough reference to see how AngularJS applies MVC principles. The Wikipedia website is a great resource if you want additional information about MVC in general.
To get started with AngularJS, you first need to understand the various components that you will be implementing and how they interact with each other. The following sections discuss the various components involved in an AngularJS application, their purpose, and what each is responsible for.
AngularJS introduces the concept of a module representing components in an application. The module provides a namespace that enables you to reference directives, scopes, and other components based on model name. This makes it easier to package and reuse parts of an application.
Each view or web page in AngularJS has a single module assigned to it via the ng-app directive. (Directives are discussed later in this chapter.) However, you can add other modules to the main module as dependencies, which provides a very structured and componentized application. The main AngularJS module acts similar to the root namespace in C# and Java.
Scopes and the Data Model
Views with Templates and Directives
HTML web pages are based on a DOM in which each HTML element is represented by a DOM object. A web browser reads the properties of a DOM object and knows how to render the HTML element on the web page, based on the DOM object’s properties.
You can also create your own AngularJS directives to implement any necessary custom functionality you need in a web application. In fact, you should use your own custom directives to do any direct DOM manipulation that a web application needs.
A great feature of AngularJS is the capability to add expressions inside the HTML template. AngularJS evaluates expressions and then dynamically adds the result to a web page. Because expressions are linked to the scope, you can have an expression that utilizes values in the scope, and as the model changes, so does the value of the expression.
AngularJS completes the MVC framework through the implementation of controllers. Controllers augment the scope by setting up the initial state or values in the scope and by adding behavior to the scope. For example, you can add a function that sums values in a scope to provide a total such that if the model data behind the scope changes, the total value always changes.
One of the best features of AngularJS is the built-in data binding. Data binding is the process of linking data from the model with what is displayed in a web page. AngularJS provides a very clean interface to link the model data to elements in a web page.
In AngularJS data binding is a two-way process: When data is changed on a web page, the model is updated, and when data is changed in the model, the web page is automatically updated. This way, the model is always the only source for data represented to the user, and the view is just a projection of the model.
Services are the major workhorses in the AngularJS environment. Services are singleton objects that provide functionality for a web app. For example, a common task of web applications is to perform AJAX requests to a web server. AngularJS provides an HTTP service that houses all the functionality to access a web server.
The service functionality is completely independent of context or state, so it can be easily consumed from the components of an application. AngularJS provides a lot of built-in service components for basic uses, such as HTTP requests, logging, parsing, and animation. You can also create your own services and reuse them throughout your code.
Dependency injection is a process in which a code component defines dependencies on other components. When the code is initialized, the dependent component is made available for access within the component. AngularJS applications make heavy use of dependency injection.
A common use for dependency injection is consuming services. For example, if you are defining a module that requires access to the web server via HTTP requests, you can inject the HTTP service into the module, and the functionality is available in the module code. In addition, one AngularJS module consumes the functionality of another via dependency.