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
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.
<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 { 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';Now in NgModule you need to declare your newly created module , add the reference in RouterModule
@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>Hope you have understood how to create a new angular module and link from application
You may be interested in following posts