Scribd
Upload
13 views5 pages

IP Record Till EXP 12 127

The document outlines steps to create a single page application using Angular routing. It defines routes for registration and login components. The navigation bar component is added to the header outlet. Styling is added for forms. The output is verified, successfully developing the design.

Uploaded by

kvnk8604
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
13 views5 pages

IP Record Till EXP 12 127

The document outlines steps to create a single page application using Angular routing. It defines routes for registration and login components. The navigation bar component is added to the header outlet. Styling is added for forms. The output is verified, successfully developing the design.

Uploaded by

kvnk8604
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/ 5

Ex.

No : 12 Angular Reg No:210701127


Date : 04/11/2023

AIM :
Program to develop an attractive web pages using Angular 9.

PROCEDURE:
1. Define a simple controller:
2. After created module and controller, use them in our HTML.
3. Include angular script and app.js that we built.
4. Specify module in ng-app attribute and controller in ng- controller attribute.
5. Start working on adding single page application support.
6. Make a single page application and don’t want any page refreshes, use
Angular’s routing capabilities.
7. Include angular-route script after the main angular script.
8. Specify that the module depends on ngRoute module to be able to use it.
9. The next thing is to distinguish common HTML for every page. This HTML
will be layout of the website.
10. Then specify the place where HTML of each page will be placed in our layout.
There is a ng view directive for that.
11. ng-view is an Angular directive that will include the template of the current
route (for example, /blog or /about) in the main layout file.
12. Configure the routes. Use $routeProvider service from the ngRoute module.
13. For each route, specify templateUrl and controller.
14. If user will try to go to the route that does not exist, handle this by using
otherwise function. In our case, we will redirect user to the “/” route:
15. Build controllers for every route (already specified their names in
routeProvider).

PROGRAM:
//app.component.html

<router-outlet name="header"></router-outlet>
<router-outlet></router-outlet>

//app-routing.module.ts

import { NgModule } from '@angular/core'; import { RouterModule, Routes }


from '@angular/router'; import { RegisterComponent } from
'./register/register.component'; import { LoginComponent } from
'./login/login.component'; import { NavbarComponent } from
'./shared/navbar/navbar.component'; const routes: Routes = [
{ path: 'register', component: RegisterComponent },
{ path: 'login', component: LoginComponent },
{ path: '', component: NavbarComponent, outlet: 'header' },
];
@NgModule({
imports: [RouterModule.forRoot(routes)], exports:
[RouterModule],
}) export class AppRoutingModule {}

//navbar.component.html
<nav>
<a routerLink="/register">Register</a> |
<a routerLink="/login">Login</a>
</nav>
<hr>

//navbar.component.css nav{
font-size: 2em;
text-align: center; width: 100%;
} nav a{
text-decoration: none; color:
black; margin: 0.5em; display:
inline-block;
}

//login.component.html
<!DOCTYPE html>
<html>
<head>
<title>Login Form</title>
</head>
<body>
<form action="" method="post"> <table>
<tr>
<td>USER ID:</td>
<td><input type="text" name="user_id"></td>
</tr>
<tr>
<td>PASSWORD:</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="Login">
</td>
</tr>
</table>
</form>
</body>
</html>

//login.component.css
* { overflow: hidden;
} table {
border-collapse: collapse; width:
55%; margin: 2em auto;
} table, th, td {
border: 1px solid black;
}
th, td {
padding: 10px; text-align: left;
} tr:nth-child(even) {
background-color: #f2f2f2;
} input[type="text"],
input[type="password"] {
width: 96%; padding: 5px;
}
input[type="submit"] {
background-color: black; color:
white; padding: 10px 20px;
border: none; cursor: pointer;
min-width: 200px;
} td[colspan="2"] {
text-align: center;
}

//register.component.html
<!DOCTYPE html>
<html>
<head>
<title>Registration Form</title>
</head>
<body>
<form action="" method="post">
<table>
<tr>
<td>ENTER ROLL NO:</td>
<td><input type="text" name="roll_no"></td>
</tr>
<tr>
<td>ENTER EMAIL ID:</td>
<td><input type="text" name="email_id"></td>
</tr>
<tr>
<td>NAME:</td>
<td><input type="text" name="name"></td>
</tr>
<tr>
<td>PASSWORD:</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="Submit">
</td>
</tr>
</table>
</form>
</body>
</html>

//register.component.css
*{ overflow: hidden; } table {
border-collapse: collapse; width:
55%; margin: 2em auto; } table, th,
td {
border: 1px solid black; } th, td
{
padding: 10px; text-
align: left; } tr:nth-
child(even) {
background-color: #f2f2f2; }
input[type="text"],
input[type="password"] {
width: 96%; padding: 5px; }
input[type="submit"] {
background-color: black; color:
white; padding: 10px 20px; border:
none; cursor: pointer; min-width:
250px; border-radius: 6px; }
td[colspan="2"] {
text-align: center;
}
OUTPUT:

RESULT:
Thus the given design was successfully developed and output was verified.

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy