In this article you will understand importance of mainly used terms in Angular 9 by Sagar Jaybhay. You will understand Components, Modules, How angular 9 works?

Angular 9

Angular is binding frameworks.  It helps us to bind view and model. In angular, you can have multiple apps inside the src folder.

Components

In angular, the binding code which binds the UI means our Html and Model is component. Here Component is the part of angular, which receives data from the UI and Sends data back to UI.

In an enterprise application, you can have a lot of views, lots of components and lots of models.

Modules

If you collect different component and group them into one repo is called modules and these component are generally belong to the same modules

In by default angular generated boilerplate code which doesn’t contain model but as per requirement we want that and we created in our application. The naming convention for this is app.model.ts.

Component In Details In Angular 9:

Below is the code for a component which is generated by default by using angular cli.

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

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

In angular, we need to create a class first and after that, we use @component which is decorater and other programming languages are termed as an attribute, data annotation.

Now take each term in @Component.

1. selector: Placed Html in that location
2. templateUrl: it means whatever data or fields are present in that component is binded with this Html file which is given in this property.
3. styleUrls: this means for above Html use this style sheet which is present in this location.

In our component class which is AppComponent in our case, we have given export keyword before this. If we didn’t give the export keyword then it is not accessible or visible outside of that .ts file.

Points to remember:

The connection between view and model is done by component.

Module In Angular 9:

The module is used to group related components under the hood. Below is code for a module which is auto-generated by angular cli.

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 { }

So if you see above code AppModule is a class and it is decorated by @NgModule decorator. So we learn every property in this decorator.

1. Declarations: this is used to declare the component which is used under this module. If you have comp1, comp2 like component then these are declared inside these declarations. When you use this component inside the declaration first you need to import them.
2. Imports: it is used to import mainly supporting modules
3. Providers: A provider is an instruction to the Dependency Injection system on how to obtain a value for a dependency.
4. Bootstrap: this is used to give a starting component or root component where the application starts.

If you consider an enterprise application is having lots of modules and for a startup, we need only one so

GitHub Project Link: https://github.com/Sagar-Jaybhay/angular9

Sagar Jaybhay

Sagar Jaybhay, from Maharashtra, India, is currently a Senior Software Developer at Software Company. He has continuously grown in the roles that he has held in the more than seven years he has been with this company. Sagar Jaybhay is an excellent team member and prides himself on his work contributions to his team and company as a whole.