Scribd
Upload
18 views8 pages

Task 8

Download

Uploaded by

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

Task 8

Download

Uploaded by

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

10211CS212: WEB AND MOBILE APPLICATION DEVELOPMENT

TASK 8 : Develop web application to implement routing and


navigation in Angular.
Aim:
To create a web application to implement routing and navigation in Angular.
Procedure:
1. Create a New Angular Project named “angular-routing-app” with the
Installed CLI

2. Generating New Components:


Generate two components to navigate between: HomeComponent and
AboutComponent.

Lab Ex. Mr. S. Vasudevan, Assistant Professor / CSE, Vel Tech Page 1.1
10211CS212: WEB AND MOBILE APPLICATION DEVELOPMENT

3. Once the server starts, the Angular live development server will start. Use
command ng serve

Lab Ex. Mr. S. Vasudevan, Assistant Professor / CSE, Vel Tech Page 1.2
10211CS212: WEB AND MOBILE APPLICATION DEVELOPMENT

4. Steps to Run and Develop Your Angular Project:


 Open the Project in a Code Editor:
o Open your Angular project folder () in a code editor like Visual Studio
Code.
This is where you will modify files and build components, services, and other Angular
features.

5. Updating app.component.html to Add Navigation Links

In the main app.component.html, To create the navigation links (e.g., for


Home and About) that the user can click to navigate between the pages, Change the
coding below.

<!-- app.component.html -->


<div class="navigation">
<a routerLink="/home">Home</a> |
<a routerLink="/about">About</a>
</div>

<!-- Where the routed components will be displayed -->


<router-outlet></router-outlet>

Lab Ex. Mr. S. Vasudevan, Assistant Professor / CSE, Vel Tech Page 1.3
10211CS212: WEB AND MOBILE APPLICATION DEVELOPMENT

6. Creating home.component.html (HomeComponent) under home


folder
This is the HTML for the home component.
<!-- home.component.html -->
<div class="home">
<h1>Welcome to the Home Page!</h1>
<p>This is the homepage of our Angular application with
routing.</p>
</div>

7. Creating about.component.html (AboutComponent) under about


This is the HTML for the about component.

<!-- about.component.html -->


<div class="about">
<h1>About Us</h1>
<p>This is the about page of our Angular application with
routing.</p>
</div>

8. Styling the Components in app.component.css


Add CSS codes to style the navigation and components.

/* app.component.css */
.navigation {
margin: 20px;
font-size: 18px;
}
.navigation a {
margin-right: 10px;
text-decoration: none;
color: blue;
}

.navigation a:hover {
text-decoration: underline;
}

.home, .about {
padding: 20px;
border: 1px solid #ddd;

Lab Ex. Mr. S. Vasudevan, Assistant Professor / CSE, Vel Tech Page 1.4
10211CS212: WEB AND MOBILE APPLICATION DEVELOPMENT

background-color: #f9f9f9;
margin: 10px;
}

h1 {
color: #4CAF50;
}

 The .navigation class styles the navigation links.


 The .home and .about classes style the content of the home and about
components.
 The hover effect is added to make the links more interactive.

9. Modifying app.module.ts to Include RouterModule


By importing Angular’s RouterModule to configure routing in the
application.

// 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 { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { RouterModule, Routes } from '@angular/router';

// Define the routes here


const routes: Routes = [
{ path: '', component: HomeComponent }, // Default
route
{ path: 'home', component: HomeComponent }, // Home page
{ path: 'about', component: AboutComponent } // About
page
];

@NgModule({
declarations: [
AppComponent,
HomeComponent,
AboutComponent
],
imports: [
BrowserModule,

Lab Ex. Mr. S. Vasudevan, Assistant Professor / CSE, Vel Tech Page 1.5
10211CS212: WEB AND MOBILE APPLICATION DEVELOPMENT

AppRoutingModule,
RouterModule.forRoot(routes) // Import RouterModule
with routes
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

 routerLink: These directives create clickable links that Angular's router listens
to in order to navigate between components.
 router-outlet: This is a placeholder where the routed components will be
displayed based on the current URL.

10. To Separate routing logic into its own module app-


routing.module.ts
// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

const routes: Routes = [


{ path: '', component: HomeComponent }, // Default
route
{ path: 'home', component: HomeComponent }, // Home page
{ path: 'about', component: AboutComponent } // About
page
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

11. To Run the Application


Open Your Web Browser:
Once the server is running, you can view your application by opening your
browser and navigate using http://localhost:4200.

Lab Ex. Mr. S. Vasudevan, Assistant Professor / CSE, Vel Tech Page 1.6
10211CS212: WEB AND MOBILE APPLICATION DEVELOPMENT

If server at http://localhost:4200/ is running, it means your


Angular project is already set up and running.

Result :

Lab Ex. Mr. S. Vasudevan, Assistant Professor / CSE, Vel Tech Page 1.7
10211CS212: WEB AND MOBILE APPLICATION DEVELOPMENT

Thus the above program was executed and output was verified successfully.

Lab Ex. Mr. S. Vasudevan, Assistant Professor / CSE, Vel Tech Page 1.8

You might also like