Open In App

Angular 7 | Architecture

Improve
Improve
Like Article
Like
Save
Share
Report

Angular is a platform or framework to build client-based applications in HTML and TypeScript. It is written in TypeScript. It implements core and optional functionality as a set of TypeScript libraries that are imported into applications. Angular consists of Three main things that are Modules, Components, and Routing.

 
 

ngModules or modules are basic building blocks of angular applications. An angular app is defined by a set of ngModules. It is important for every application to have a root module in it. Components define views, which are sets of screen elements that Angular can choose among and modify according to the program logic and data. It is important to have at least one component in every application called the root component. Components use services to communicate and share data with each other. Routing includes the linking of multiple components with each other in order to navigate to a different components.

 

Modules:

A NgModule declares a compilation context for a set of components that is dedicated to an application domain, a workflow, or a closely related set of capabilities. A NgModule can associate its components with related code, such as services, to form functional units. Every angular application always has a module known as a root module, named as Appmodule in the application. 
 

We can import functionality from other modules and allow them to export and use by other modules using routing (RouterModule). By making several modules we can divide functionality and allows reusability of code. Also making modules reduces a load of loading modules as they are loaded on-demand only, this feature makes Angular robust in nature. 

 

Components:

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). Each component defines a class containing the login in TypeScript format and view of the page in HTML template. 
 

We have three things comprising in a component. 
 

  1. Templates: 
    The HTML templates have the look of how the page will look. The template logic provided by directives and the linking of the application data with the DOM of the page is done by using binding. Data binding is of two types one is Event binding (changes on basis of events) and other is Property binding (changes on basis of data in the application). 
     
  2. Services and dependency injection: 
    By dependency injection, we mean to allow access to the service by subscribing it. It acts as a delegate to the service. 
     
  3. Data Binding: 
    Binding in angular are of two types: 
    • Event Binding: 
      Event binding is used to capture events on the user’s end on the app and respond to it in the target environment by updating the application data. For example, changing the color of the button whenever the user clicks on it. The event binded the onclick event. 

       

    • Property Binding: 
      Property binding is used to pass data from component class and facilitates interpolation of values that are computed from the application back into the HTML. For example, making a toggle color changing button in which the button changes its color back to normal on every 2nd click. In this case, the template will take the data from the app data and look if the toggle is 1 or 0 (can be true or false), this type of binding is property binding. 
       

 

Metadata Of Component class:

Metadata means data about data. It comprises of inner information of the data provided. In case of components, the metadata of a component class comprises of 2 basic things: – 
 

  1. The metadata for a component class has a template that defines a view. A template combines ordinary HTML with Angular directives and binding which allow Angular to modify the HTML before presenting on the screen. 
     
  2. The metadata for a service class consists of information Angular needs to make it available to components through dependency injection (DI).

For better understanding you can refer the diagram given as follows: 
 

 

Routing:

The Angular Router NgModule provides a service that lets you define a navigation path among the different application states and view hierarchies in your app. 
 

The router maps URL-like paths to other components instead of pages. When a user performs an action, such as clicking a link, the router intercepts the browser’s behavior and shows or hides component’s hierarchies. It allows the on-demand load feature thus making a robust application. 

Just like web pages router also logs activities into the browser and thus the forward and back button works in case of routing. 
 

Working of Routing:

The router maps URL-like paths to views instead of pages. Whenever any action is performed, like clicking a link to another page in the browser, the router intercepts the browser’s behavior and shows or hides view hierarchies. 

If the router finds that the current application state requires particular functionality, and the module that defines it hasn’t been loaded, the router can lazy-load the module on demand which makes the application robust in nature.

 

The router interprets a link URL according to your application’s navigation rules and data state. The router logs activity in the browser’s history, so the back and forward buttons work as well. 

To define navigation rules, the navigation paths are linked to the components. A path uses a URL-like syntax to integrate program data. 

 


Last Updated : 05 Nov, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads