According to Wikipedia Routing in layman's language is -
"... the process of selecting a path for traffic …".
If we talk in Angular context, in a large application there will be multiple components combined together to form a feature (e.g. login, dashboard, user profile etc.). But we cannot show all the feature to the user at the same time. Depending on a particular case we will be displaying a specific feature to the user. This process of selecting and displaying a specific feature for a specific path is known as routing. Angular implements routing using a separate module called RoutingModule. So lets quickly dive into how we can set up angular routing in our project.
Step 1 - Creating an angular project
Create an angular project by typing in the below command
ng new learn-angular-routing-setup
You would be prompted with a question like below -
You can opt for no by typing in N, as we are learning how to setup Routing from scratch. :P and complete the installation process.
Once the setup is done open the code folder in your favorite code editor. I have chosen VS Code. It would look something like below -
Now under _src _> _app _folder we start our real work.
Step 2 - Create components to be displayed on each route
Now lets create two components by using the below command -
First Component
ng generate component componentOne
Second Component
ng generate component componentTwo
Step 3 - Creating the application routing module
Inside the app folder create a file named -
app-routing.module.ts
Step 4 - Setting up the routing module
import { NgModule } from "@angular/core";
import { RouterModule, Routes } from '@angular/router';
import { ComponentOneComponent }
from "./component-one/component-one.component";
import { ComponentTwoComponent }
from "./component-two/component-two.component";
const routes: Routes = [
{
path: 'one',
component: ComponentOneComponent
},
{
path: 'two',
component: ComponentTwoComponent
}
];
@NgModule({
declarations: [],
imports: [
RouterModule.forRoot(routes)
],
providers: [],
exports: [
RouterModule
],
bootstrap: []
})
export class AppRoutingModule { }
So, now lets understand the above code piece by piece.
a. We are declaring and exporting a class AppRoutingModule.
b. Decorating the class with NgModule decorator
c. Declaring a constant routes
array. It contains all the various routes you need in your application. Every route object will contain primarily two items (I would say as of now)
i. path-to be displayed in the url of the browser
ii. component-the component to be displayed when the URL is hit
d. In the import array of the NgModule decorator we pass the routes we declared in the step c using
RouterModule.forRoot(routes)
e. In the exports array we pass the RouterModule
so that it can be consumed/ imported by the appModule
Step 4 - Add the router module in the application module
Next we open the app.module.ts file and import the Routing Module we created just now.
Step 5 Create a placeholder to display the component
So we have done the setup, but we need a placeholder where the component will sit when the particular URL is hit. For this we create a placeholder in our app.component.html by adding the below code.
<router-outlet></router-outlet>
& that's it. We are done!!!
Now let's start the application by using npm start
. By default the application will open in localhost port 4200. So open your favorite browser and type in http://localhost:4200/one
You will see the below output -
and when you navigate to http://localhost:4200/two
the below output -
So you have successfully setup your routing.
Cheers...
Happy Coding
Top comments (0)