AngularJS Fundamental Concepts for Building Web Applications: Part 1

This article introduces you to AngularJS, Google's popular JavaScript framework for developing web applications.

Pure JavaScript frameworks have surged in popularity as of late. And, as you'll see, many of the concepts that were present in other OO frameworks such as Java Struts and .NET MVC are also present in Angular.

You have probably heard of the Model, View, and Controller (MVC) frameworks, which are designed to scale well when building large, industrial-sized applications. The MVC concept is pivotal to the core architecture of the Angular framework and is discussed in the next section.

Architecture

Models are scope objects in Angular. In traditional MVC, the model encapsulates information to be displayed by a View. Scoping is really just another way of saying, "This is a container for this view."

Notice that the Controller implements the scoped logic. It does the heavy lifting while handing off the results to the Model, which then relays it to the View. You can think of the Model as an interface, whereas the Controller is the implementation of this interface.

Angular breaks down the implementation further to be handled by Services. A service in Angular is implementation logic that would otherwise be in a controller. The purpose of moving this logic out of the controller is to avoid "fat controllers."

There are several architectural concepts used by Angular that you should be aware of. These concepts are described in the following sections.

Two Way Binding

Two way binding (TWB) is a concept that means Angular will update your Model automatically, or as necessary, when users input data into your forms. This tight-coupling between input values and their corresponding variable representation in the Model makes handling data much easier-without having to watch for user-driven events.

TWB has been around a long time in OO language frameworks such as Java Struts and .NET MVC. The concept is new In JavaScript, however, and Angular makes this introduction into the JavaScript framework world only to be followed by a host of other JavaScript frameworks that have come out after Angular that do the same things.

Dirty Checking

Dirty checking (DC) variable data conceptually means that you do not have to use getter and setter methods (as you do with OO languages such as C# or Java) to update your View data. Using getters and setters in those languages are meant to ensure data encapsulation, an OO concept that means that your instance variables should not be directly accessible.

Although JavaScript is not an OO language, DC variable data would make sense. But in my opinion, it somewhat compromises the MVC architectural model because this model is an OO-based model, and not enforcing data encapsulation weakens this architectural principle.

Dependency Injection

Dependency injection (DI) is a bit difficult to grasp conceptually. It is another whole article (even book) topic of its own, but remember that it refers to injecting types at run-time.

Because JavaScript is not a compiler language, it is more natural for it to embrace DI because objects can change identity while the script is active. DI can be thought of as dynamic Factory objects that return a certain type based on the context of a type request.

If you have studied OO languages, you should make this connection easily. For example, suppose that we have a Factory named Animal and want to return animal types of a cat, dog, or rabbit. It can be done using a Factory pattern.

DI is much the same, but it is backward. Using a Factory, we would have to call the correct constructor by passing in a variable to the Factory base class that will tell us what constructor to return. This is not a bad thing, but requires the base class to know about all the lower-level classes that derive from the base class.

With DI, the base class does not have to know what classes are derived from it. How can this be achieved? To put it simply, an Interface is used to bridge the derived classes to the base class. Now, the behavior is reversed, so we have dependency inversion.

With DI in effect, we can just pass in the type of animal for which we want a constructor, and the base class will return the correct one-but by using a single implementation that implements the interface that the derived classes are also using.

Directives

Directives are special tags in Angular that define a certain binding to an element section of a page. For example, if we want to put all our logic output handled by a controller into a <div> section, we can use the directive ng-controller.

In effect, this means that only this section has controller-related output logic. See the Hello World example below for further clarification.

Hello World

Now it is time for an example: a simple Hello World from Angular. The following example uses a template: a central theme to Angular applications that is simply a View that can be implemented by more than one Model:

<html ng-app>
<head>
  <script src="angular.js"</script>
  <script src="controllers.js"></script>
</head>
<body>
  <div ng-controller='HelloController'>
    <p>{{greeting.text}}, World</p>
  </div>
</body>
</html>

And the logic in controllers.js:

function HelloController($scope) {
  $scope.greeting = { text: 'Hello' };
}

This example illustrates the use of Directives and a Controller. In this example, we pull in the Angular library, along with our Controller logic that is often wrapped in a file called controllers.js. When this page is rendered, it tells the browser that the <div> section with the ng-controller directive is bound to the function in the controllers.js file called HelloController.

This creates a TWB between the variable "greeting" in the controller to the one in the <div> section. In Angular, these variables are often used as expressions to display output, or basically as placeholders for the data that will populate the variable-an example of DC.

As you can see, a variable has its own built-in property attributes such as text for assigning and displaying text. This is another example of Angular using OO concepts.

Conclusion

In this article, you learned the basic fundamentals of the AngularJS framework. Understanding these fundamentals is central to exploring and fast-tracking Angular learning further.

Try building a simple web application that requires a registration page. In doing so, you will learn how Angular works with web forms. The next step is to learn how Angular works with databases, which is mostly through Ajax-like functionality.

In the second article in this series, I introduce you to using modules and services to organize your application components