How Do Add Module In A Service Program

In this tutorial, we will see how to create Angular Modules to organize code. Feature modules are NgModules to organize code. Every bit your app scales, you can organize code relevant to a specific feature. In add-on, feature Modules help the states employ clear boundaries for your features. With Feature Modules, yous can keep code related to the particular functionality or characteristic carve up from other lawmaking.

Difference b/due west Feature Modules and Root Modules

The characteristic module is an organizational best do instead of the concept of the core Athwart API. The feature module delivers a cohesive fix of functionality focused on a specific application demand, such every bit the user workflow, routing, or forms. While you can do everything within the root module, feature modules help you sectionalisation the app into focused areas.

Angular Modules

Modules in Angular are a great way to organize an application and extend it with capabilities from external libraries. Angular libraries are NgModules, such as FormsModule,  HttpClientModule, and RouterModule. Many third-party libraries are available as NgModules, such as Fabric Pattern, Ionic, and AngularFire2. Angular Modules can also add services to the application. Such services might exist internally developed, like something you prepare for your application.

Let the states install a make new Athwart project, and so we utilise Feature Modules to organize our project.

Pace i: Install Angular

Let us create a new Angular Project.

ng new angmodules

Nosotros will employ Angular Routing, but Athwart CLI does non provide it considering information technology is unnecessary. So, we will be creating only 1 route for this demo. Now, go within the folder and open the project on your editor. I am using VSCode.

cd angmodules && code .

As well, add the Bootstrap using the post-obit control.

npm install bootstrap --save

Now, add together the bootstrap file inside theangular.jsonfile.

"styles": [    "src/styles.css",    "./node_modules/bootstrap/dist/css/bootstrap.min.css" ],

Now, we can employ Bootstrap in our awarding.

Step ii: Create a new Angular Module

Bold you already take an app, you created with the Angular CLI, create the characteristic module using an Athwart CLI by entering the post-obit control in the root project directory.

ng thousand module student

Information technology volition create a folder within theappdirectory chosena student, and inside thestudentdirectory, you can meet one file calledstudent.module.ts.

// pupil.module.ts  import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common';  @NgModule({   declarations: [],   imports: [     CommonModule   ] }) export class StudentModule { }

So that means if we accept whatever functionalities or components related to the pupil, it volition exist imported here in thispupil.module.tsfile and not straight within theapp.module.tsfile as we mostly used to do.

The side by side pace is to create the three angular components related to the student module. So allow us do that.

Stride iii: Create Angular Components

We volition create the following three angular components related to a educatee module.

1. student.component.ts
2. student-list.component.ts
3. student-list-item.component.ts

So type the following command to generate the above angular components.

ng chiliad c student/student --spec=false ng g c student/student-list --spec=simulated ng g c educatee/student-list-detail --spec=false

Yous can come across that all of the components are created inside theapp >> studentfolder, and at present you can meet the student.module.tsfile. This is because all of the three components are automatically imported inside the student.module.tsfile.

// student.module.ts  import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { StudentListComponent } from './educatee-list/educatee-list.component'; import { StudentListItemComponent } from './student-listing-item/student-list-item.component'; import { StudentComponent } from './student/pupil.component';  @NgModule({   declarations: [StudentComponent, StudentListComponent, StudentListItemComponent],   imports: [     CommonModule   ] }) export course StudentModule { }        

Import thestudent.module.tsfile within theapp.module.tsfile.

// app.module.ts  import { BrowserModule } from '@athwart/platform-browser'; import { NgModule } from '@athwart/core';  import { StudentModule } from './student/student.module';  import { AppComponent } from './app.component';  @NgModule({   declarations: [     AppComponent   ],   imports: [     BrowserModule,     StudentModule   ],   providers: [],   bootstrap: [AppComponent] }) consign class AppModule { }        

So, now we accept registered the new module to the angular application. Now, start the angular development server to see if we do non have errors.

ng serve

Footstep 4: Create a model and service for pupil

You tin can create a service using the following command.

ng grand s educatee/student --spec=false

Information technology will create a file like this.

// educatee.service.ts  import { Injectable } from '@angular/core';  @Injectable({   providedIn: 'root' }) export form StudentService {    constructor() { } }        

Now, create one file chosen student.model.ts within the student folder and add the following code.

// pupil.model.ts  export class Student {     id: Number;     name: String;     enrollno: Number;     college: String;     university: String; }        

So, this is our model grade, Student. Nosotros are displaying this kind of information to the frontend.

Now, write the following code inside thestudent.service.tsfile.

// student.service.ts  import { Injectable } from '@angular/core'; import { Observable } from 'rxjs';  import { Student } from './student.model';  @Injectable({   providedIn: 'root' }) export class StudentService {      students: Student[] = [{         id: one,         proper name: 'Krunal',         enrollmentnumber: 110470116021,         higher: 'VVP Applied science Higher',         university: 'GTU'     },     {         id: ii,         proper noun: 'Rushabh',         enrollmentnumber: 110470116023,         college: 'VVP Engineering Higher',         university: 'GTU'     },     {         id: 3,         name: 'Ankit',         enrollmentnumber: 110470116022,         college: 'VVP Engineering science College',         university: 'GTU'     }];      constructor() { }      public getStudents(): any {         const studentsObservable = new Observable(observer => {             setTimeout(() => {                 observer.next(this.students);             }, 1000);         });          return studentsObservable;     } }        

So, in this file, we take defined the getStudents function that will return the Observables. Then when the subscriber wants the data from the publisher, information technology will subscribe to this studentsObservable, and the publisher starts publishing the values, and eventually, the subscriber gets the information. Please check out this Angular Observables Tutorial With Example commodity if you are unfamiliar with Observables.

The final step is to prepare all the components to brandish the data coming from the educatee service.

Step v: Configure the routing.

Add the following code inside theapp.module.tsfile.

// app.module.ts  import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router';  import { StudentModule } from './student/student.module';  import { AppComponent } from './app.component'; import { StudentComponent } from './student/student/student.component';  const routes: Routes = [     {         path: '',         component: StudentComponent     } ];  @NgModule({   declarations: [     AppComponent   ],   imports: [     BrowserModule,     StudentModule,     RouterModule.forRoot(routes),   ],   providers: [],   bootstrap: [AppComponent] }) export grade AppModule { }        

I accept imported the Routes and RouterModule and then created an assortment of routes and registered them to our angular awarding.

We need to display the component using the router-outletinside theapp.component.htmlfile.

<div course="container">     <router-outlet></router-outlet> </div>

And then till now, what we have done is if the user goes to the http://localhost:4200, nosotros will display thestudent.component.htmlview. So our next step is to add together the HTML code that views.

Step 6: Display the data.

The kickoff thing is to write the following code inside thepupil.component.htmlfile.

<div>     <app-student-list></app-student-list> </div>        

And then this is our outermost component, and inside this component, there is the student-list.component.htmlcomponent.

At present, write the following code within thepupil-listing.component.tsfile.

// student-listing.component.ts  import { Component, OnInit } from '@angular/core'; import { StudentService } from '../student.service'; import { Student } from '../pupil.model';  @Component({   selector: 'app-student-list',   templateUrl: './student-list.component.html',   styleUrls: ['./pupil-list.component.css'] }) export grade StudentListComponent implements OnInit {      students: Student[] = [];      constructor(private studentservice: StudentService) { }      ngOnInit() {         const studentObservable = this.studentservice.getStudents();         studentObservable.subscribe((studentsData: Student[]) => {             this.students = studentsData;         });     } }        

Also, write the following HTML within thestudent-list.component.htmlfile.

<div class="row">     <div course="col-doctor-iii col-xs-6" *ngFor="permit student of students">         <app-student-listing-detail [educatee]="student"></app-student-listing-item>     </div> </div>        

And then, we are passing the information from the parent to the child component. So, app-student-list-component will wait the one input value called educatee.

Now, write the post-obit lawmaking inside the student-listing-particular.component.ts file.

// student-list-item.component.ts  import { Component, OnInit, Input } from '@angular/core';  @Component({   selector: 'app-student-list-item',   templateUrl: './pupil-listing-detail.component.html',   styleUrls: ['./student-list-item.component.css'] }) export class StudentListItemComponent implements OnInit {      @Input() student: any;      constructor() { }      ngOnInit() {     }  }        

Add the HTML lawmaking inside thestudent-list-item.component.htmlfile.

<div grade="card">     <div class="card-body">         <h5 class="card-title">{{ educatee.proper noun }}</h5>         <h6 class="menu-subtitle">{{ student.enrollmentno }}</h6>         <p course="bill of fare-text">{{ student.college }}</p>         <p form="carte du jour-text">{{ student.university }}</p>         <a grade="btn btn-master" href="#" >Go somewhere</a>     </div> </div>

Save the file and go to http://localhost:4200/, and you will see something like this after 1 second.

Determination

And so, we have taken our whole project module-wise for the student by creating a file called student.module.ts.

All the functionality and code related to the student will reside on the app >> studentbinder, and you lot can create equally many modules every bit yous want past separating them to each of that respected folders.

Characteristic Modules is the best way to organize your scalable lawmaking; you do non need to register all of your components inside theapp.module.tsfile; you will create 1 module file respected to your functionality and add your components within them.

Finally, y'all tin add the module inside theapp.module.tsfile, and you are good to get. This is one of the best means to organize your projection.

That's it for this tutorial.

Source: https://appdividend.com/2022/02/16/angular-modules/

Posted by: alexanderaunce1959.blogspot.com

Share this post