What is Routing in Angular?
Angular Router provides a way to navigate from one part to another part in a Single Page Application (SPA).
How to create Routing in Angular?
Here we used Angular 14 for this project.
Would you like to add angular routing (y/n)
At the time of the creation of the project, it will ask to include angular route press Y to add routing.
PS G:\angularproject> ng new test11 ? Would you like to add Angular routing? (y/N) y
It will add angular routing to the angular project.
Creating Components for Routing
We will create the following components for Routing
- HomeComponent
- AboutUsComponent
- ContactUsComponent
- PricingComponent
- ProductsComponent
- TestimonialComponents
To generate the above components we used the following commands
> ng g c home > ng g c aboutus > ng g c contactus > ng g c pricing > ng g c products > ng g c testimonial
Adding Routing Module
Open file app.module.ts and import AppRoutingModule.
Now your import statement will look like
imports: [
BrowserModule,
AppRoutingModule
],
This requires importing the following Module below
import { AppRoutingModule } from './app-routing.module';
Add routes to app-routing.module.ts
To create a routes route array takes objects of routes that have fields like path and component as below.
{ path: 'home', component: HomeComponent }
Add all components to route array.
const routes: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'aboutus', component: AboutusComponent },
{ path: 'contactus', component: ContactusComponent },
{ path: 'products', component: ProductsComponent },
{ path: 'pricing', component: PricingComponent },
{ path: 'testimonial', component: TestimonialComponent },
{ path: '', redirectTo: '/home', pathMatch: 'full' }, // redirect to first-component
{ path: '**', component: HomeComponent }, // Wildcard route
];
/home opens HomeComponent
/aboutus opens AboutusComponent
/countactus opens ContactusComponent
and similar for others.
In the last two path, one is ‘ ‘ (empty) and redirectTo is configured. It means if we do not provide any path it will redirect to /home.
So at the start when it will load localhost:4200 it will redirect to localhost:4200/home.
To configure the wildcard route here ** is used.
If any route is not configured then the default route works.
Here we specified HomeComponent as a wildcard.
create a constant routing component and add all components there.
export const routingComponents = [ HomeComponent, AboutusComponent, ContactusComponent, ProductsComponent, PricingComponent, TestimonialComponent ]
Run and Access Routing
To run a project use ng serve command
it will open localhost:4200 and redirect to localhost:4200/home and shows the contents of HomeController.
Similar wat open localhost:4200/aboutus, locahost:4200/contactus etc.
It will show the default content of the respective controller.
index.html
<base href=”/”> must be present at index.html
also to improve look and feel add bootstrap5.
AngularRouting
Adding Menu at app.component.html
Bootstrap5 navbar is used to create menu
<router-outlet></router-outlet> is required for angular routing.
Run and Check again
Test all links.
All are working properly.
Adding Content to Components
1 home.component.html
First slide label
Some representative placeholder content for the first slide.
Second slide label
Some representative placeholder content for the second slide.
Third slide label
Some representative placeholder content for the third slide.
2 aboutus.component.html
About Us
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
3 contactus.component.html
Contact Us
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,Submit Your Query
4 pricing.component.html
Pricing
We are know brand we have 23m regular visitor customer We provide items at very low priceFree
$0/mo
- Feature1
- Feature2
- Feature3
- Feature4
- Feature5
Standard
$10/mo
- Feature1
- Feature2
- Feature3
- Feature4
- Feature5
Premium
$40/mo
- Feature1
- Feature2
- Feature3
- Feature4
- Feature5
Platinum
$100/mo
- Feature1
- Feature2
- Feature3
- Feature4
- Feature5
5 products.component.html
Products
6 testimonial.component.html
Testimonial
Mr. Ram
I have a very good experiance with this site. I am regular user of this site
Last updated 3 mins ago
Mr. Arnold
I have a very good experiance with this site. I am regular user of this site
Last updated 3 mins ago
Mr. Ram
I have a very good experiance with this site. I am regular user of this site
Last updated 3 mins ago
Mr. Arnold
I have a very good experiance with this site. I am regular user of this site
Last updated 3 mins ago
Run again the project.
You will see following output.
Output
Home Page
About Us Page
Contact us Page
Products Page
Pricing Page
Testimonial Page
Read More
How to create First Angular App (Step by step )
Angular Spring Boot showing data in table