Angular Deconstructed: Understanding Components, Modules, and Services

Angular is one of many JavaScript frameworks, which is used to build Single Page Application(SPA) with HTML and TypeScript.

TypeScript is like a statically typed JavaScript. In TypeScript, you must declare variable types during coding to prevent compilation errors. This is an improvement over JavaScript, as it helps catch errors at development time rather than during runtime, making it more suitable for production applications.

In the Angular world, the central characters are Component, Module, Service, and Template, with a supporting cast of Directives and Pipes. Let's dive into each of these core elements:

Component

Components serve as the fundamental building blocks of any angular application. These are just a set of screen elements.

Components render views, which can be used independently or can also be nested in other components.

Components are the one who contributes to the formation of the DOM tree of the application.

Components are composed of HTML Template and TypScript logic.

Templates are very similar to HTML files, except that in Templates, you also get TypeScript syntax to bind the data from the TypeScript files.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'demo';
}

Module

Modules are the architecture of an Angular application.

Modules choose components from the component basket and assemble them together to construct the entire application. You don’t need to do it manually, modules will handle this. You just have to tell the module what components it can use.

There can be more than one module in a single application. But, there has to be one root module. Angular bootstraps the whole application starting from the root module.

We can use other modules and their functionalities in any module simply by importing them into the module.

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

Service

Service contains the logic related to data manipulation, which is not directly linked to the component's template view. That logic is to be handled by the component itself. You can do some common tasks, such as calling API endpoints, etc.

Multiple components can share and use the same instance of a service simplifying data sharing among two or more components.

Angular uses Dependency Injection (DI) to inject services into components. Let’s understand DI in a little more depth.

Dependency Injection (DI)

Angular creates an application-wide injector during the bootstrap process that takes care of injecting services into components.

If a service is called for the first time by some container, the injector will put it in a service container, and next time, if some other component calls it, the injector will provide the same instance of the service instead of creating a new one allowing both components to read or manipulate the same data.

If, for any reason, you want a new instance of service for a particular component, you can specify that in the component’s metadata.

@Injectable({
    providedIn: 'root'
})
export class AppService{

}

Directives

Directives are used to add some additional features to our Templates.

Angular provides you with many built-in directives to use on the fly. In addition to that, you can create your own custom directives as well.

Majorly, there are two kinds of directives Angular gives provision to. Let’s know them.

• Attribute Directives: Attributes Directives are used to add attributes (like style or class) to an element. E.g. ngStyle, ngClass.

• Structural Directives: Structural Directives are used for modifying the control flow of the elements. E.g. ngIf, ngFor, ngSwitch

It's worth noting that components are also directives. However, due to their frequent use and significant importance, Angular designates a separate category for them

Conclusion

In this blog, we were introduced to Angular and its key actors in building an Angular application.

We’ve understood that Angular is a JavaScript framework used to build single-page applications using HTML Template and TypeScript. Angular uses TypeScript for its clear advantage over JS.

We’ve also got to know about key actors, what their functions are, and why they are even used.