Angular Module Creation and Linking

Here you learn what is module in Angular! Module Creation and Linking in Asp.net Core Angular project.

In this tutorial we talk about how to create a module in angular and link it with existing application navigation.

As we know angular framework is specially designed for SPA (single page application) , so we develop each function as module then link in application, you can think this module are partial view, or a small portion of the page, so whenever required we call the module on the main page, then let end user use that functionality

Here in example we have created two modules for student, one for displaying student list and another for adding new student

This is how a new module appear on application

Create new Module in Angular Application

Now let’s understand module creation and linking, in picture below we have shown how to create a new angular module and integration, link that with existing navigation

Step 1
Create an Angular module, basically a set of files with one functionality, to create module with complete implementation we need a html file, a CSS file (optional), a typescript file with module definition and calling data API services.

As you can see in above picture, we have created a student module in ClientApp => app => Components => student folder.

• student.model.html : all html code with angular tags

  <p *ngIf="!students"> <em>Loading student list...</em> </p>
  <table class='table' *ngIf="students">
  <thead>
  <tr>
  <th>Name</th>
  <th>Address</th>
             
          </tr>
      </thead>
      <tbody>
          <tr *ngFor="let s of students">
              <td>{{ s.fullname }}</td>
              <td>{{ s.address }}</td>
              
          </tr>
      </tbody>
  </table>
                  

  
  

• student.model.ts : This is a typescript file, syntax is very similar to JavaScript and C#, but still there are things written differently in typescript

  Import all required angular model

  import { Component, Inject } from '@angular/core';
  import { Http } from '@angular/http';
  import { Observable } from 'rxjs/Observable';
  import { Router } from '@angular/router';
  

  Now setup component details like html file name, CSS file name (optional) etc, in this example we have not added the CSS reference

  @Component({
      selector: 'student',
      templateUrl: './student.model.html'
  })
  

  This is our component class where method implementation is done, here we can define properties, methods, call API services

  export class StudentDataComponent {
  searchtext: string;
  public students: student[];
  constructor(http: Http, @Inject('BASE_URL') baseUrl: string) {
  http.get(baseUrl + 'api/StudentService/GetStudentList').subscribe(result => {
  this.students = result.json() as student[];
  }, error => console.error(error));
      }
      public Search() {
      }
      deserialize(input: any) {
      Object.assign(this, input);
      return this;
      }
      }
  

  This is student object concrete definition in form of interface; in above component class we have returned an array of this interface

  interface student {
              fullname: string;
              address: string;
              email: string;
              mobile: string;
              isActive: boolean;
              }
  

At this point our module implementation is done, now we have to link it from our application as per implementation style of Single Page Application (SPA) layout

Linking a module in angular application is like just calling a page using hyperlink, but before that call you need to understand following changes

open shared.module file: ClientApp => App => app.shared.module.ts

import { CreateStudentComponent } from './components/addstudent/addstudent.model';

@NgModule({
declarations: [
AppComponent,
NavMenuComponent, CreateStudentComponent,
HomeComponent
],
imports: [
CommonModule,
HttpModule,
FormsModule,
RouterModule.forRoot([
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent }, { path: 'addstudent', component: CreateStudentComponent },
            { path: '**', redirectTo: 'home' }
        ])
    ]
})

All reference setup has been done for new module, now we can simply call the module using hyperlink

<a [routerLink]="['/addstudent']">
Student Module
</a>

You may be interested in following posts

• How to use Angular Directives in html page
• Angular filter service
• angular form validation example