Angular Architecture

 

Angular Architecture:

Angular is a platform and framework to build single-page client applications using HTML and TypeScript. It is written in Typescript.

   The basic building blocks are NgModules. It provides compilation context to components. An angular app has always a root module to enable bootstrapping.

                                                              Architectural diagram src: Angular.io

 

The main building blocks of Angular applications:

1.              Modules 
2.             Component
3.             Metadata
4.             Templates
5.             Directives 
6.             Data binding
7.             Services
8.             Dependency injection

Modules:

Angular applications are modular and every Angular app has a root module, which provides the bootstrap mechanism. 

• An angular module is a class with an @NgModule decorator.
• NgModules import the functionalities form other NgModules just like other JavaScript modules.
• We can divide the functionality by making several modules. By making this it allows the reusability of code.

 

Components:

The component is the basic building block of Angular application. Every Angular app has at least 1 component known as the root component that connects a component hierarchy with the page document object model (DOM)

Command to create a Component by using Terminal:

  ng g component componentName

When you creating a component it will create the following files. 

Component.ts –  here, we can define the module, properties, data logics.

Component.html -  HTML file where you can see the view.

Component.scss - CSS file for the new component is created.

Component.spec.ts – testing file to perform unit testing

 

A component is defined using the @Component decorator. Under the  @Component decorator, you can define the following items.

Component  selector  - 'app-root',

Component template(HTML  File) -'./app.component.html'

Style for the component -'./app.component.scss'

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

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.scss']

})

export class AppComponent {

  title = 'AngularConcepts';

}