A module is a single unit of implementation of distinct functionalities. Collections of such modules will be used to implement complex applications. Implementing module patterns helps you avoid global collisions of variables and methods. JavaScript encapsulates both private and public methods under a single object by implementing a modular pattern. The modular pattern achieves encapsulation using closure in JavaScript. JavaScript doesn't support access modifiers; however, the same effect can be achieved using function scopes. All Angular applications are modular in nature. We develop Angular applications by creating many modules. We develop modules to encapsulate functionalities that are independent and have one responsibility. A module exports the classes available in that module. Angular modules are called as NgModules. At least one Angular module will...

AngularJS has controllers, scopes, and directives to deal with views, bind data, and respond to events by updating changes to data. In Angular, Components replaced controllers, scopes, and directives from AngularJS.

Angular, introduced components that support the object-oriented component model to write cleaner code. A component is a simple class that holds the logic of managing the associated template or view. A simple component class is given as follows:

Class FirstComponent { 
} 

In a component class, we will expose properties and methods to a template or view. Component properties can provide data for a template or view and allow the user to modify property values. Component methods can be called according to user actions over the view.

As you can see, the preceding code creates a simple JavaScript class named FirstComponent...

As you saw in the last section, we define JavaScript plain classes for a component, and we annotate it with some information to inform the Angular framework that this class is a component.

We leverage the Typescript syntax and attach the classes with metadata using the decorator feature. To make a class as a component, we add the @Component decorator, as shown in the following code:

@Component({...})
export class FirstComponent {...}

As you can see, the code snippet shows that the FirstComponent class has been decorated as a component.

Now, let's attach metadata to the FirstComponent class using the decorator syntax:

@Component({ 
   selector: 'first-component', 
   templateUrl: 'app/first.component.html' 
}) 
export class FirstComponent {...} 

Here, we have added metadata, such as a selector and templateUrl. The selector metadata...

You will have noted that we have added inline markups for a view or template when annotating the component. We can also add a template URL isolating the view, or template markups in a separate HTML file, instead of having it as an inline view or template.

A template comprises HTML tags that provide information to Angular on rendering the components. A simple template content is given in the following lines of code. It renders the name of the book and publisher:

<div> 
  The Name of the book is {{bookName}} and is published by {{pubName}}. 
</div> 

An inline template is used when there is a need to render very simple content, such as a one-liner, for example. In such cases, inline views...

The binding technique will enable you to bind data to a template and will allow users to interact with the bound data. The Angular binding framework takes care of rendering the data to a view and updating it as per user actions over the view.

The following screenshot gives you a quick glimpse of the various binding techniques in Angular. We will go through each binding technique in detail:

Binding types such as Interpolation, Property, Attribute, Class, and Style support one-way data flow from the data source (exposed from the component) to a view or template. Template markups that let the data flow from a component property or method to a template are given in the following...