Angular is a Javascript framework used to develop applications. It uses HTML and languages like typescript or javascript, all of which will compile to javascript. The following are the main development blocks used in Angular applications:

• Components
• Modules
• Data binding
• Dependency injection
• Templates
• Directives
• Metadata
• Services

Modules

A module can be defined as a group of directives, filters, services, configuration information and controllers. All angular applications have an AppModule, which is the module class in angular with a decorator denoted as @NgModule. This is the root module.

An angular module can be created using this line of code;

var myExample = angular.module('myExample', []);

Services

These are javascript functions. They are used when one wants to do a specific task in an application. They have the function, value or feature needed in the application. A mechanism called the Dependency Injection is used to inject them into the application.

An angular2 service is registered using this line of code;

myExample.value('appName', 'FirstEverApp');

You might also have other services that exist inside other initialization blocks. You can configure these services using this line of code;

myExample.config(['$locationProvider', function($locationProvider) {

Components

When developing a page, we build specific elements and logic by using custom attributes and elements enabling us to increase the functionality of the other existing components. Components enable us to do this. The screen patch, or the view, is controlled by the component. In the code below, there are some views that are controlled by the component, they include:

• The list of presidents
• The app root that has navigation links
• The president’s editor.

This component is called the PresidentListComponent, It contains a presidents property, whose purpose is to return array of presidents. It gets this array from a service. The component also contains a selectPresident() method. The method is used to set a selectPresident property, when the applications user wants to select a president from the list.

export class PresidentListComponent implements OnInit {
  presidents: President[];
  selectedPresident: President;

  constructor(private service: PresidentService) { }

  ngOnInit() {
    this.president = this.service.getPresident();
  }

  selectPresident(president: President) { this.selectedPresident = president; }
}

Templates

A template is a statement that is used to give response to an event that comes from a binding target. Examples of such binding targets include a component, an element or a directive. A templated is in form of HTML, although has some differences to HTML, and allows angular2 to understand how a component is supposed to be rendered.

We can create a template for the component that we created in the components section, PresidentListComponent. The code looks like this;

<h2>President List</h2>
<p><i>Pick a president from the list</i></p>
<ul>
  <li *ngFor="let president of presidents" (click)="selectPresident(president)">
    {{president.name}}
  </li>
</ul>
<president-detail *ngIf="selectedPresident" [president]="selectedPresident"></president-detail>

Data Binding

This is the process in which data between the view components and the model is synchronized. When event binding and property are merged to a single notation by the use of the ngModel directive, we refer to this as two-way data binding. We would like to add a binding markup for the template we created above. This will allow angular2 to understand how to easily connect all the sides. To do that, we create the following lines of code;

<input [(ngModel)]="president.name">

Directives

A directive is an attribute that changes the behaviour or the appearance of an element. They are similar to other HTML attributes. When templates are rendered by angular, their DOM is transformed following instructions that are provided by directives. @Directive decorator is used with directive classes.

In our example in the templates section, we have used a directive, called the structural directive. This is the directive we have used:

<li *ngFor="let hero of heroes"></li>
<hero-detail *ngIf="selectedHero"></hero-detail>

There are two types of directives;
* Structural directive; this directive works in changing the layout by replacing, adding and removing DOM elements.
* Attribute directive

Metadata

A class in angular2 is processed using metadata. For example, let us assume that we have a component called ExampleComponent, this will be seen as a class, until the developer tells angular2 that this is a component. Metadata is then used to let angular2 know that ExampleComponent is not a class, but a component. Using a decorator, metadata is attached to angular2 code.

In our example of the Presidents list, PresidentListComponent is a class. We have to tell angular2 that this is a component. In the code example below, we can tell angular2 about the component;

@Component({
  selector: 'president-list', /*this allows angular create and insert instances of the component when it gets the <president-list> tag in HTML*/
  templateUrl: './president-list.component.html',
  providers:  [ PresidentService ] /*this lets angular2 understand that the constructor in the component will require PresidentService to get the presidents to be displayed*/
})
export class PresidentListComponent implements OnInit {
/* . . . */
}

Dependency Injection

This is a pattern designed to be used in angular2 to pass as dependencies an object to other components in the whole application. It is used to create a new instance of classes together with all the dependencies of that class.

When a component is created in angular2, angular2 seeks to learn from an injector about the services that are required by the component. This is possible since the injector has all the service instances created previously. In a case where the service required is not there, then the injector makes one, and stores it as well, then gives it to angular2. Angular2 then calls the constructor in the component, using the service from the injector as arguments. For example, in our President list example, our constructor looks like this;

constructor(private service: PresidentService) { }

Note

Small applications might only have the root module, but we can have other feature modules in applications, where each is a code block to the domain of the application, a capabilities set or a workflow.

What is a decorator? This is a function that is used to change classes in javascript. In an angular2 application, many decorators are used to within classes. They add metadata to classes, to enable angular understand the meaning and functioning of the classes. For example, we have seen that one of these decorators is the @NgModule. It takes an object of single metadata with properties that explain more about a module. Examples of some of these properties include:

• Bootstrap; this is the view for the main application.
• Imports; used where other module classes are exported to be used by this component template
• Exports; used where other module classes are imported to be used by other component template
• Providers; this creates services that are used in the collection of global services
• Declarations; this is used with view classes belonging to this particular module.

Conclusion

These are the main building blocks of an angular2 application. They are basically what an angular2 application is made of, and it is what you need to learn. Having understood them, it would be very easy for you to build an application in angular2.