Angular Architecture Overview

Angular is a framework for building client applications in HTML and either JavaScript or a language like Type Script that compiles to JavaScript.

The framework consists of several libraries, some of them core and some optional.

You write Angular applications by composing HTML templates, writing component classes to manage those templates, adding application logic in services, and boxing components and services in modules.

Then you launch the app by bootstrapping the root module. Angular presenting your application content in a browser and responding to user interactions according to the instructions you’ve provided.

For now, focus on the big picture.

The Eight main building blocks of an Angular application:

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

Modules

Every Angular app has a root module, conventionally named AppModule, which provides the bootstrap mechanism that launches the application. An app typically contains many functional modules.

// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

If we want to use another custom Angular module, then we need to register that module inside the app.module.ts file. Organizing your code into distinct functional modules helps in managing the development of complex applications, and in designing for re usability.

Angular libraries

Angular ships as a collection of JavaScript modules. You can think of them as library modules.

Each Angular library name begins with the @angular prefix.

You install them with the npm package manager and import parts of them with JavaScript importstatements.

For example, import Angular’s Component decorator from the @angular/core library like this:

import { Component } from '@angular/core';

You also import Angular modules from Angular libraries using JavaScript import statements:

import { BrowserModule } from '@angular/platform-browser';

In the example of the simple root module above, the application module needs material from within that BrowserModule. To access that material, add it to the @NgModule metadata imports like this.

imports:      [ BrowserModule ],

In this way you’re using both the Angular and JavaScript module systems together.

Components

Every Angular project has at least one component, the root component and root component connects the component hierarchy with a page document object model (DOM). Each component defines the class that contains application data and logic, and it is associated with the HTML template that defines the view to be displayed in a target app.A component controls a patch of screen called a view.

The @Component decorator identifies the class immediately below it as the component and provides the template and related component-specific metadata.

// app.component.ts
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

Templates

The angular template combines the HTML with Angular markup that can modify HTML elements before they are displayed. Template directives provide program logic, and binding markup connects your application data and the DOM. There are two types of data binding.

• Event binding lets your app respond to user input in the target environment by updating your application data.
• Property binding lets you interpolate values that are computed from your application data into the HTML.

<div style="text-align:center">
  <h1>
    {{2 | power: 5}}
  </h1>
</div>

In the above HTML file, we have used a template. We have also used the pipe inside the template to transform the values to the desired output.

Metadata

Metadata tells Angular how to process a class.It is used to decorate the class so that it can configure the expected behavior of a class. Decorators are the core concept when developing with Angular (versions 2 and above). The user can use metadata to a class to tell Angular app that AppComponent is the component. Metadata can be attached to the TypeScript using the decorator.

// app.component.ts
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

Here is the @Component decorator, which identifies the class immediately below it as a component class.

The @Component decorator takes a required configuration object with the information Angular needs to create and present the component and its view.

Here are a few of the most useful @Component configuration options:

• selector: CSS selector that tells Angular to create and insert an instance of this component where it finds a <app-root>tag which is Parent Component.
• templateUrl: module-relative address of this component's HTML template.
• providers: array of dependency injection providers for services that the component requires.

The metadata in the @Component tells Angular where to get the major building blocks you specify for the component.

The template, metadata, and component together describe a view.

Apply other metadata decorators in a similar fashion to guide Angular behavior. @Injectable, @Input, and @Output are a few of the more popular decorators.

Data binding

Data binding plays an important role in communication between a template and its component.

Data binding is also important for communication between parent and child components.Angular allows defining communication between a component and the DOM, making it very easy to define interactive applications without worrying about pulling and pushing the data.

From the Component to the DOM

Interpolation: {{ value }}: Interpolation adds the value of the property from the component.

<p>Name: {{ student.name }}</p>
<p>College: {{ student.college }}</p>

Property binding: [property]=”value”

With property binding, a value is passed from a component to a specified property, which can often be a simple html attribute.

<input type="text" [value]="student.name" />
<input type="text" [value]="student.college" />

Event binding: (Event)=”myFunction($event)”

With Event binding, a value is passed from a child Component to Parent Component,which can often be a simple html attribute.

<input type="text" (myEvent)="onClick($event)" />

Two-Way binding: [(ngModel)]=”property”

It is an important fourth form that combines property and event binding in a single notation, using the ngModel directive.

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

Directives

An Angular component isn’t more than a directive with the template. When we say that components are the building blocks of Angular applications, we are saying that directives are the building blocks of Angular projects. Let us use built-in Angular directive like ngClass, which is a better example of the existing Angular attribute directive.

<p [ngClass]="{'coffee'=true, 'red'=false}">
    Angular 7 Directives Example 
</p>
<style>
    .coffee{color: coffee}
    .red{color: red}
</style>

Here, based on the [ngClass] directive’s value, the text has color. In our example, the text will be coffee because it is true.

Services

For data or logic that isn’t associated with a specific view, and that you want to share across components, you create a service class. The @Injectable decorator immediately precedes the service class definition. The decorator provides the metadata that allows your service to be injected into client components as a dependency. Angular distinguishes components from services to increase modularity and reusability. By separating a component’s view-related functionality from other kinds of processing, you can make your component classes lean and efficient.

Dependency injection

Dependency injection (DI) lets you keep your component classes lean and efficient. DI does not fetch data from a server, validate the user input, or log directly to the console instead they delegate such tasks to the services. DI is wired into a Angular framework and used everywhere to provide new components with the services or other things they need. Components consume services; that is, you can inject a service into a component, giving the component access to that service class.