Routing a very important part of any application. Routing is a way by which user can navigate your application. Routing is defined by the developer on which route what things need to serve towards client or user. On routing other hidden things also dependent like SEO & feeds. So Bad routing can spoil you application & leave a bad impression on the user. Different technology different way of routing. But front-end user experiences the same.
I have worked on PHP as well as the JS So, I can give the idea about two technologies. For PHP if you using any framework like Codeigniter, CakePHP they already have the option for routing. But If you create PHP application by using class structure then you can use already popular class Altorouter. I have so many options regarding the routing. For more information regarding Altorouter, you can click on the link.
For javascript I working on the angular. The angular has our library with the help of that Angular manage routing. Now today I will show you how angular 5 or angular 6 working. After starting of angular version 2 the angular start using typescript.
Now today I will show you how routing work in the angular 5 or angular 6. So for demonstrating routing in Angular 6, I have to create an application. So with the use of angular CLI tool, you can easily create a new project using the below command.
Angular generate new application
ng new {application_name} or ng new test112I create an application for you on your specified path and also install the required packages so that your application will work perfectly.
I will take a few time so, wait with patience. Once your application created then type below command so that your application will open in the browser.
ng serve --openAbove command will compile your typescript and convert in js then compiler compiled thing serve to the browser. There is –open stand for open browser otherwise. The browser will need to open itself. Now created application working fine.
Addition of new module in angular application
Before starting anything few more module I need to install jquery, bootstrap which helps to create awsome UI Design.
npm install [email protected] jquery --saveAfter successful installation, we need to add a path in the angular.json file like below which is exist on your application root.
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
"scripts": [
"./node_modules/jquery/dist/jquery.js",
"./node_modules/bootstrap/dist/js/bootstrap.js"
]
There is app.componet.ts already found in the app folder. Now we need to create three pages so that I show perfect routing navigation.
So I will type below commands.
ng generate component home
ng generate component about
ng generate component contact
Above commands will create three pages for your application. Now one file needs to create app.router.ts which is responsible to complete routing. In this file, I have to import three ( ModuleWithProviders, Routes, RouterModule)modules which is below.
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
I also need to define create page component like below. So that I can include routes variable.
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './contact/contact.component';
Addition of Routing file
Now I have define a routes array. So that we can store all routes in this variable like below.
export const routes: Routes =[
{path:'home', component: HomeComponent},
{path:'about', component: AboutComponent},
{path:'contact', component: ContactComponent},
];
export const routing : ModuleWithProviders = RouterModule.forRoot(routes);
Now app.router.ts file is ready finally add to app.module.ts & import module routing using below code.
import { routing } from './app.router';
imports: [
BrowserModule,
FormsModule,
routing]
Now finally add the navigation to the app.component.html. So the code will look like below.
routerLink=’home’ will generate the link for the home component & “routerLinkActive” will add the active class on the active route.
One more thing needs to add the <router-outlet></router-outlet> so that all component will show their data in it.
Finally, you can view the output.
