Free Web Development Online Tutorials, Learn to Code
Learn AngularJS, angularjs tutorial, angularjs directive, angularjs application, angularjs api

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.

Module in Angular Js

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 angular module

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

how to create angular module

Create new Module in Angular Application

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 Angular Module in Application

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 the new module you have just created, in shared.module.ts file add the following line
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

 
Angular Module Creation & Linking

Othe JavaScript Framework
Angular JS Examples | Join Asp.Net MVC Course