Scribd
Upload
3 views8 pages

Angular Module

This document provides a step-by-step guide on creating a routing module in Angular 9, enabling navigation between multiple views in a single-page application. It covers creating a new Angular application, setting up the main module with routing, adding components, and configuring routes. Additionally, it explains the use of the <router-outlet> directive for dynamic content rendering based on the current route state.

Uploaded by

venulogics2004
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views8 pages

Angular Module

This document provides a step-by-step guide on creating a routing module in Angular 9, enabling navigation between multiple views in a single-page application. It covers creating a new Angular application, setting up the main module with routing, adding components, and configuring routes. Additionally, it explains the use of the <router-outlet> directive for dynamic content rendering based on the current route state.

Uploaded by

venulogics2004
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

How to create module with Routing in Angular 9?

Routing in Angular allows the users to create a single-page application with multiple
views and allows navigation between them. Users can switch between these views
without losing the application state and properties.

We will apply the above approach to build the routing module in a stepwise manner.

1. Create a new Angular Application: Using the following command, we can


quickly create an angular app:

ng new AngularModule

 Create the main module: Go inside our project folder. We want to use the
Angular CLI command to create a module after we’ve correctly created the
app. In an angular application, angular gives a command to construct a
module with routing. So, to create the main module, run the command
below:

ng g module main --routing
After running the successful above command, it will create two files in the
new folder name as main inside the app folder.

 Import-module to module.ts file: We simply import our module into


the app.module.ts file, so update this file as shown below:

Approach:
 Create an Angular app that to be used.
 Create the navigation links inside the app component and then provide
the “routerLink” directive to each route and pass the route value to
the “routerLink” directive.
 Then add the routes to the routing.module.ts file and then import the
routing.module.ts into the app.module.ts file.

Project Structure: It will look like the following image:

Example:
 app.module.ts
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";

import { AppRoutingModule } from "./app-routing.module";


import { AppComponent } from "./app.component";
import { MainModule } from "./main/main.module";

@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, AppRoutingModule, MainModule],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}

Create components for the main module: We now use the following command to
add a new component to our main module, so let’s create the home, about us,
and contact us components for the main module:
ng g component main/home
ng g component main/aboutus
ng g component main/contactus
After running the above command successfully:
Add routing for components: In this step we are simply adding the route with the
component we created so we need to update our main module routing module file as
shown below:
 main-routing.module.ts

import { NgModule } from "@angular/core";


import { RouterModule, Routes } from "@angular/router";
import { AboutusComponent } from "./aboutus/aboutus.component";
import { ContactusComponent } from "./contactus/contactus.component";
import { HomeComponent } from "./home/home.component";

const routes: Routes = [


{ path: "", component: HomeComponent },
{ path: "aboutus", component: AboutUsComponent },
{ path: "contactus", component: ContactUsComponent },
];

@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class MainRoutingModule {}
Update component HTML file: Finally, we need to update the HTML file of our
application component, we need to add bindings of all routes with router outlet, so
we update them as shown below:

 app.component.html

<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover {
background-color: #04aa6d;
}

.active {
background-color: #333;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home"
routerLink="/">Home</a></li>
<li><a href="#contact"
routerLink="/contactus">Contact</a></li>
<li><a href="#about"
routerLink="/aboutus">About</a></li>
</ul>

<div style="text-align: center; font-weight:


bolder; font-size: 50px">
<router-outlet></router-outlet>
</div>
</body>
</html>

Now, we can run our example application using the below command:
ng serve
Output:

Final Application output

import Vs export
In Angular, the import keyword is used to import components, directives, pipes, and
services from other modules into the current module. The export keyword is used to
export components, directives, pipes, and services from the current module so that they
can be imported into other modules.
Here is a table that summarizes the key differences between import and export in
Angular:
Feature import export

Purpose To make components, directives, pipes, and To make components, directives, pipes, and
services from other modules available in the services from the current module available to
current module. other modules.

Syntax import { ComponentName } from export { ComponentName };


'path/to/component';

Example import { AppComponent } from './app.component'; export { AppComponent };

Here are some additional things to keep in mind about import and export in Angular:
 You can import modules as well as individual components, directives, pipes, and services.
 You can export multiple components, directives, pipes, and services at once.
 You can use the as keyword to give an imported component, directive, pipe, or service a
different name.
 You can only export components, directives, pipes, and services that have been declared
in the current module.
Overall, import and export are two important keywords that allow you to modularize
your Angular code and make it easier to reuse components, directives, pipes, and
services across different modules.

<router-outlet> in angular
The router-outlet is a directive provided by the Angular Router module. It acts as a
placeholder that Angular dynamically fills based on the current router state. This allows
you to build single-page applications where different parts of the app can change
without reloading the entire page.
To use the router-outlet, you first need to add the RouterModule to your app.module.ts
file. This will enable routing in your application.
Once you have added the RouterModule, you can add the router-outlet directive to any
component's template. The router-outlet will be filled with the component that
matches the current route state.
For example, the following code shows a simple component with a router-outlet:
Code
<div>
<router-outlet></router-outlet>
</div>

If the current route state matches the route for the HomeComponent, then the
HomeComponent will be inserted into the router-outlet.
------

You might also like