Blog

Angular 8 – Architecture

Let us see the architecture of the Angular framework in this chapter.

The angular framework is based on four core concepts and they are as follows −

  • Components.
  • Templates with Data binding and Directives.
  • Modules.
  • Services and dependency injection.

Component

The core of the Angular framework architecture is Angular Component. Angular Component is the building block of every Angular application. Every angular application is made up of one more Angular Component. It is basically a plain JavaScript / Typescript class along with an HTML template and an associated name.

The HTML template can access the data from its corresponding JavaScript / Typescript class. The component’s HTML template may include other components using its selector’s value (name). The Angular Component may have optional CSS Styles associated it and the HTML template may access the CSS Styles as well.

Let us analyze the AppComponent component in our ExpenseManager application. The AppComponent code is as follows −

// src/app/app.component.ts 
import { Component } from '@angular/core'; @Component({ 
   selector: 'app-root', 
   templateUrl: './app.component.html', 
   styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
   title = 'Expense Manager'; 
}

@Component is a decorator and it is used to convert a normal Typescript class to Angular Component.

app-root is the selector/name of the component and it is specified using selector metadata of the component’s decorator. app-root can be used by application root document, src/index.html as specified below:- 

<!doctype html> 
<html lang="en"> 
   <head> 
      <meta charset="utf-8"> 
      <title>ExpenseManager</title> 
      <base href="/"> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <link rel="icon" type="image/x-icon" href="favicon.ico"> 
   </head> 
   <body> 
      <app-root></app-root> 
   </body> 
</html>

app.component.html is the HTML template document associated with the component. The component template is specified using templateUrl metadata of the @Component decorator.

app.component.css is the CSS style document associated with the component. The component style is specified using styleUrls metadata of the @Component decorator.

AppComponent property (title) can be used in the HTML template as mentioned below −

{{ title }}

Template

The template is basically a superset of HTML. The template includes all the features of HTML and provides additional functionality to bind the component data into the HTML and to dynamically generate HTML DOM elements.

The core concept of the template can be categorized into two items and they are as follows −

Data binding

Used to bind the data from the component to the template.

{{ title }}

Here, the title is a property in AppComponent and it is bind to the template using Interpolation.

Directives

Used to include logic as well as enable the creation of complex HTML DOM elements.

<p *ngIf="canShow">
   This sectiom will be shown only when the *canShow* propery's value in the corresponding component is *true* </p> 
<p [showToolTip]='tips' />

Here, ngIf and show tooltip (just an example) are directives. ngIf creates the paragraph DOM element only when can show is true. Similarly, showToolTip is Attribute Directives, which adds the tooltip functionality to the paragraph element.

When the user mouse over the paragraph, a tooltip with be shown. The content of the tooltip comes from the tips property of its corresponding component.

Modules

Angular Module is basically a collection of related features/functionality. Angular Module groups multiple components and services under a single context.

For example, animations-related functionality can be grouped into a single module and Angular already provides a module for the animation-related functionality, BrowserAnimationModule module.

An Angular application can have any number of modules but only one module can be set as a root module, which will bootstrap the application and then call other modules as and when necessary. A module can be configured to access functionality from other modules as well. In short, components from any module can access components and services from any other modules.

The following diagram depicts the interaction between modules and their components.

Let us check the root module of our Expense Manager application.

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

Here,

  • NgModule decorator is used to convert a plain Typescript / JavaScript class into Angular module.
  • declarations option is used to include components into the AppModulemodule.
  • bootstrap option is used to set the root component of the AppModulemodule.
  • providers option is used to include the services for the AppModulemodule.
  • imports option is used to import other modules into the AppModulemodule.

The following diagram depicts the relationship between Module, Component, and Services

Services

Services are plain Typescript / JavaScript class providing very specific functionality. Services will do a single task and do it best. The main purpose of the service is reusability. Instead of writing a functionality inside a component, separating it into services will make it useable in another component as well.

Also, Services enable the developer to organize the business logic of the application. Basically, the component uses services to do its own job. Dependency Injection is used to properly initialize the service in the component so that the component can access the services as and when necessary without any setup.

Workflow of Angular application

We have learned the core concepts of Angular application. Let us see the complete flow of a typical Angular application.

src/main.ts is the entry point of the Angular application.

src/main.ts bootstraps the AppModule (src/app.module.ts), which is the root module for every Angular application.

platformBrowserDynamic().bootstrapModule(AppModule) .catch(err => console.error(err));

AppModule bootstraps the AppComponent (src/app.component.ts), which is the root component of every Angular application.

@NgModule({ 
   declarations: [ 
      AppComponent 
   ], 
      imports: [ 
   BrowserModule 
   ], 
   providers: [], 
   bootstrap: [AppComponent] 
}) 
export class AppModule { }

Here,

AppModule loads modules through the imports option.

AppModule also loads all the registered services using the Dependency Injection (DI) framework.

AppComponent renders its template (src/app.component.html) and uses the corresponding styles (src/app.component.css). AppComponent name, app-root is used to place it inside the src/index.html.

<!doctype html> 
<html lang="en"> 
   <head> 
      <meta charset="utf-8"> 
      <title>ExpenseManager</title> 
      <base href="/"> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <link rel="icon" type="image/x-icon" href="favicon.ico"> 
   </head> 
   <body> 
      <app-root></app-root> 
   </body> 
</html>

AppComponent can use any other components registered in the application.

@NgModule({ 
   declarations: [ 
      AppComponent 
      AnyOtherComponent
   ], 
   imports: [ 
      BrowserModule 
   ], 
   providers: [], 
   bootstrap: [AppComponent] 
}) 
export class AppModule { }

Component use other component through directive in its template using target component’s selector name.

<component-selector-name></component-selector-name>

Also, all registered services are accessible to all Angular components through Dependency Injection (DI) framework.

Leave a Reply