{"id":59860,"date":"2018-05-03T15:21:01","date_gmt":"2018-05-03T09:51:01","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?p=59860"},"modified":"2024-04-12T14:20:49","modified_gmt":"2024-04-12T08:50:49","slug":"angular-4-routing","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/angular-4-routing\/","title":{"rendered":"Angular 4 Routing"},"content":{"rendered":"

Angular 4 Routing<\/h1>\n

If you want to navigate to different pages in your application, but you also want the application to be a SPA (Single Page Application), with no page reloading, you can use the ngRoute module.<\/p>\n

The ngRoute module routes your application to different pages without reloading the entire application.
\nExample:<\/p>\n

Navigate to “red.htm”, “green.htm”, and “blue.htm”:
\n<body ng-app=”myApp”><\/p>\n

<p><a href=”#\/!”>Main<\/a><\/p><\/p>\n

<a href=”#!red”>Red<\/a>
\n<a href=”#!green”>Green<\/a>
\n<a href=”#!blue”>Blue<\/a><\/p>\n

<div ng-view><\/div><\/p>\n

<script>
\nvar app = angular.module(“myApp”, [“ngRoute”]);
\napp.config(function($routeProvider) {
\n$routeProvider
\n.when(“\/”, {
\ntemplateUrl : “main.htm”
\n})
\n.when(“\/red”, {
\ntemplateUrl : “red.htm”
\n})
\n.when(“\/green”, {
\ntemplateUrl : “green.htm”
\n})
\n.when(“\/blue”, {
\ntemplateUrl : “blue.htm”
\n});
\n});
\n<\/script>
\n<\/body><\/p>\n

The ngRoute module helps your application to become a Single Page Application.<\/p>\n

When a user enters a web application or website, routing is their means of navigating throughout the application. To change from one view to another, the user clicks on the available links on a page.<\/p>\n

Angular provides a Router to make it easier to define routes for the web applications and to navigate from one view to another view in the application.
\nCreating Your First Route<\/p>\n

To implement routing in the web application, you’ll be making use of the Angular Routing module. Create a file called app.routing.ts inside the src\/app folder.<\/p>\n

To get started with implementing routing, you need to import the RouterModule and Routes from @angular\/router.<\/p>\n

import { RouterModule, Routes } from ‘@angular\/router’;<\/p>\n

You’ll also need the ModuleWithProviders module for implementing routing.<\/p>\n

import { ModuleWithProviders } from ‘@angular\/core\/src\/metadata\/ng_module’;<\/p>\n

Create and export a variable called AppRoutes in the app.routing.ts, which would be a collection of all routes inside the Angular application.<\/p>\n

export const AppRoutes: Routes = [];<\/p>\n

There are two ways to create the routing module: RouterModule.forRoot and RouterModule.forChild.<\/p>\n

RouterModule.forRoot is for creating routes for the entire application, and RouterModule.forChild is for creating routes for lazy loaded modules.<\/p>\n

In this tutorial, you’ll be using RouterModule.forRoot to create routes for the root application.<\/p>\n

Create the routing module using RouterModule.forRoot inside the app.routing.ts file.<\/p>\n

export const ROUTING: ModuleWithProviders = RouterModule.forRoot(AppRoutes);<\/p>\n

Add a route inside the AppRoutes list to show our CalcComponent.<\/p>\n

{ path: ‘calc’, component: CalcComponent }<\/p>\n

Here is how the app.routing.ts file looks:<\/p>\n

import { RouterModule, Routes } from ‘@angular\/router’;
\nimport { ModuleWithProviders } from ‘@angular\/core\/src\/metadata\/ng_module’;
\nimport { CalcComponent } from ‘.\/calc\/calc.component’<\/p>\n

export const AppRoutes: Routes = [
\n{ path: ‘calc’, component: CalcComponent }
\n];<\/p>\n

export const ROUTING: ModuleWithProviders = RouterModule.forRoot(AppRoutes);<\/p>\n

As seen in the code, the route which has been added is \/calc, which would render the CalcComponent.<\/p>\n

Import the ROUTING constant inside the app.module.ts file.<\/p>\n

import { ROUTING } from ‘.\/app.routing’<\/p>\n

Add the ROUTING to the imports section.<\/p>\n

imports: [
\nBrowserModule,
\nFormsModule,
\nROUTING
\n],<\/p>\n

Here is how the app.module.ts file looks:<\/p>\n

import { BrowserModule } from ‘@angular\/platform-browser’;
\nimport { NgModule } from ‘@angular\/core’;
\nimport { ROUTING } from ‘.\/app.routing’
\nimport { AppComponent } from ‘.\/app.component’;
\nimport { CalcComponent } from ‘.\/calc\/calc.component’
\nimport { FormsModule } from ‘@angular\/forms’;
\nimport { RouterModule } from ‘@angular\/router’;<\/p>\n

@NgModule({
\ndeclarations: [
\nAppComponent,
\nCalcComponent
\n],
\nimports: [
\nBrowserModule,
\nFormsModule,
\nROUTING
\n],
\nproviders: [],
\nbootstrap: [AppComponent]\n})
\nexport class AppModule { }<\/p>\n

Save the above changes and restart the Angular application using ng serve.<\/p>\n

IT Professionals, Web Developers, web programmers, IT students can use the below links to be updated on Angular 4<\/p>\n