4

Simple Example of Angular 8/9 Routing and Navigation

 1 year ago
source link: https://www.js-tutorials.com/angularjs-tutorial/simple-example-angular-2-angular-4-routing-navigation/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Simple Example of Angular 8/9 Routing and Navigation

This is another angular 4 tutorial that helps to understand routes and navigation. It’s very easy to create routes in angular 4. Routing help to render the view based on URL parameters. The Router will map the routing url with the component.

Like, We want to render the login page at the URL /login and homepage at the /home endpoints, Login page will have LoginComponent for /login url and a DashboardComponent for the /dashboard page.

The following steps will follow to create Angular Routing

  • We will create Routes file
  • We will add RouterOutlet placeholder into the main app.component.html file
  • Add navigation link to the page

Angular provides two ways to implement routing in angular 8/9 application:

  • RouterModule.forRoot : Used to create routes for the entire application.
  • RouterModule.forChild : Create routes for lazy loaded modules.

I am assuming, You have created the home and login component, If not please create using Angular CLI:

ng create component login
ng create component home
ng create component login
ng create component home

Checkout Other Angular tutorials,

Angular 4 Routing Example

We will create app.routes.ts inside the src/app folder, We will import RouterModule and Routes from @angular/router and ModuleWithProviders from angular/core.

import { ModuleWithProviders } from '@angular/core/src/metadata/ng_module';
import { ModuleWithProviders } from '@angular/core';
import { ModuleWithProviders } from '@angular/core/src/metadata/ng_module';
import { ModuleWithProviders } from '@angular/core';

We will add routes into app.routes.js file, The whole file code is like below :

import { RouterModule, Routes } from '@angular/router';
import { ModuleWithProviders } from '@angular/core';
import { LoginComponent } from './login/login.component'
import { HomeComponent } from './home/home.component'
export const AppRoutes: Routes = [
{ path: 'login', component: LoginComponent },
{path: 'home', component: HomeComponent}
export const ROUTES: ModuleWithProviders = RouterModule.forRoot(AppRoutes);
import { RouterModule, Routes } from '@angular/router';
import { ModuleWithProviders } from '@angular/core';
import { LoginComponent } from './login/login.component'
import { HomeComponent } from './home/home.component'
 
export const AppRoutes: Routes = [
    { path: 'login', component: LoginComponent },
	{path: 'home', component: HomeComponent}
];
 
export const ROUTES: ModuleWithProviders = RouterModule.forRoot(AppRoutes);

The /login will render LoginComponent and /home will HomeComponent. The path to specify the URL and Component specify where we want to route.

You can also redirect one url to other view using redirectTo a directive.

{path: '', redirectTo: 'login', pathMatch: 'full'}
{path: '', redirectTo: 'login', pathMatch: 'full'}

We will add the above app.routes.js file into app.module.ts file with the login and home component,

import { ROUTES } from './app.routes'
import { LoginComponent } from './login/login.component'
import { HomeComponent } from './home/home.component'
import { ROUTES } from './app.routes'
import { LoginComponent } from './login/login.component'
import { HomeComponent } from './home/home.component'

And added ROUTES entry into import array:

imports: [
BrowserModule,
FormsModule,
ROUTES
imports: [
  BrowserModule,
  FormsModule,
  ROUTES
],

We need to display view at the time of start app, We will add a placeholder into app.Component.html that hold the login/home view at the time of the bootstrap application.

The router-outlet tells the Angular router where to display the views.

How to Add Router Link In Angular 4

You can navigate between views using RouterLink directives. This directive will add to the anchor tag to navigate routes.You can add a navigation link to any page as like below:

import { RouterModule, Routes } from '@angular/router';
import { ModuleWithProviders } from '@angular/core';
import { LoginComponent } from './login/login.component'
import { HomeComponent } from './home/home.component'
export const AppRoutes: Routes = [
{ path: 'login', component: LoginComponent },
{path: 'home', component: HomeComponent}
export const ROUTES: ModuleWithProviders = RouterModule.forRoot(AppRoutes);
import { RouterModule, Routes } from '@angular/router';
import { ModuleWithProviders } from '@angular/core';
import { LoginComponent } from './login/login.component'
import { HomeComponent } from './home/home.component'
 
export const AppRoutes: Routes = [
    { path: 'login', component: LoginComponent },
	{path: 'home', component: HomeComponent}
];
 
export const ROUTES: ModuleWithProviders = RouterModule.forRoot(AppRoutes);

routerLinkActive directory help to add active link.

Summary

This angular 8/9 tutorial help to understand the basics of routes and navigation. There are a lot of concepts not cover like nested routes, protected routes, query parameters etc.

You learned how to define a route and navigate through an Angular application. You can also add comments and suggestions to the below comment section.


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK