My Blog

Menu

Routing

Posted: November 24, 2021. | By: Admin

Routing:

            Routing helps in directing users to different pages based on the option they choose on the main page. Hence, based on the option they choose, the required Angular Component will be rendered to the user.

app.module.ts

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { AppComponent } from './app.component'; 
import { Appproduct } from './product.component' 
import { AppInventory } from  './Inventory.component' 
import { PageNotFoundComponent } from  './NotFound.component' 
import { RouterModule, Routes } from '@angular/router';  
const appRoutes: Routes = [ 
   { path: 'Product', component: Appproduct }, 
   { path: 'Inventory', component: AppInventory }, 
   { path: '**', component: PageNotFoundComponent } 
];  
@NgModule ({ 
   imports: [ BrowserModule, 
   RouterModule.forRoot(appRoutes)], 
   declarations: [ AppComponent,Appproduct,AppInventory,PageNotFoundComponent], 
   bootstrap: [ AppComponent ] 
}) 
export class AppModule {
} 

app.component.ts

import { Component } from '@angular/core';
@Component ({
   selector: 'my-app',
   template: '
   <ul>
      <li><a [routerLink] = "['/Product']">Product</a></li>
      <li><a [routerLink] = "['/Inventory']">Inventory</a></li>
   </ul>
   <router-outlet></router-outlet>'
})
export class AppComponent  { }

products.component.ts

import { Component } from '@angular/core';
@Component ({
   selector: 'my-app',
   template: '<h2>Products</h2>',
})
export   class   Appproduct  {
}

appInventory.component.ts

import { Component } from '@angular/core';
@Component ({
   selector: 'my-app',
   template: '<h2>Inventory</h2>',
})
export class AppInventory  {  }

 

index.html

<!DOCTYPE html>
<html>
   <head>
      <base href = "/">
      <title>Angular QuickStart</title>
      <meta charset = "UTF-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">   
      <base href = "/">
      <link rel = "stylesheet" href = "styles.css">
      <!-- Polyfill(s) for older browsers -->
      <script src = "node_modules/core-js/client/shim.min.js"></script>
      <script src = "node_modules/zone.js/dist/zone.js"></script>
      <script src = "node_modules/systemjs/dist/system.src.js"></script>
      <script src = "systemjs.config.js"></script>
      <script>
         System.import('main.js').catch(function(err){ console.error(err); });
      </script>
   </head>
   <body>
      <my-app></my-app>
   </body>
</html>

pagenotfound.component.ts

import { Component } from '@angular/core';

 
@Component ({  
   selector: 'my-app',  
   template: 'Page Not Found', 
})  
export class PageNotFoundComponent {  
} 

 

About

Aapthi Technologies,Hyderabad offers a complete range of web solutions including web designing, developing, web hosting, Internet marketing and many more. With our electrifying presence, we have swirled the scenario of web solutions. We consistently invigorate our skill-set and tech-expertise and work with a high-level of integrity. Our keen-eye on emerging trends of online business as well as technical spheres has empowered us to render the most innovative solutions. Persistent development is the key drive of Aapthi Technologies, be it in terms of infrastructure, skill-set or technology. Team Aapthi Technologies, is fully committed to render back hundred percent value for the money paid by client.

Social Links

Our Bunker

Plot No -596, Near Reliance Fresh,
Vivekananda nagar colony, Kukatpally,
Hyderabad - 500072, India.