Zanex - Angular Admin & Dashboard Template

Routing

In a single-page application, you change what the user sees by showing or hiding portions of the display that correspond to particular components, rather than going out to the server to get a new page. As users perform application tasks, they need to move between the different views that you have defined.

To handle the navigation from one view to the next, you use the Angular Router. The Router enables navigation by interpreting a browser URL as an instruction to change the view. Your complete route structure is place at app-routing.module.ts file under src » app

Suppose you want to create a new module ( For creating a new module refer create new module ) then you have to add new routes for that modules.

Basic Route

Following are the fundamental building blocks to creating a route.

Import the AppRoutingModule into AppModule and add it to the imports array.


import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module'; // CLI imports AppRoutingModule
import { AppComponent } from './app.component';

@NgModule({
declarations: [
	AppComponent
],
imports: [
	BrowserModule,
	AppRoutingModule // CLI adds AppRoutingModule to the AppModule's imports array
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Import RouterModule and Routes into your routing module.

The Angular CLI performs this steps automatically. The CLI also set up a Routes array for your routes and configures the imports and exports array


import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router'; // CLI imports router

const routes: Routes = []; // sets up routes constant where you define your routes

// configures NgModule imports and exports
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

Import any created component in app-routing.module.ts


import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DefaultComponent } from './default/default.component';

Define your routes in your Routes array.

Each route in this array is a JavaScript object that contains two properties. The first property path, defines the URL path for the route. The second property component, defines the component Angular should use for the corresponding path.

Use that component name with path, name, and data attribute in routes array in app-routing.module.ts file


const routes: Routes = 
[
	{
		path: '',
		children: 
		[
		{
			path: 'default',
			component: DefaultComponent
		},
		],
	}
];
@NgModule({
	imports: [RouterModule.forChild(routes)],
	exports: [RouterModule]
})
export class AppRoutingModule { }

Add your routes to your application.

Now that you have defined your routes, you can add the component to your application. First, add links to the components. Assign the anchor tag that you want to add the route to the routerLink attribute. Set the value of the attribute to the component to show when a user clicks on each link. Next, update your component template to include . This element informs Angular to update the application view with the component for the selected route.

Configure Link in Menu

To Add new link in Sidemenu

Following are the fundamental building blocks to creating a new link.

        
├── node_modules
├── src
|   ├── app/
|   |   ├── authentication
|   |   ├── components
|   |   ├── shared
|   |	|   |   ├── routers
|   |	|   |   |   ├── full.routes.ts
			-> Configure the route for layout to assign the navigation path to the components.
		Ex:  {
				path: 'dashboard',
				loadChildren: () => import('../../components/dashboard/dashboard.module').then(m => m.DashboardModule)
					},
				{
				path: 'charts',
				loadChildren: () => import('../../components/charts/charts.module').then(m => m.ChartModule)
				},
			-- dashboard is used as the main path to hold all the components in DashboardModule
			-- charts is used as the main path to hold all the components in ChartsModule
|   |	|   |   ├── services
|   |	|   |   |   ├── nav.service.ts(for vertical menu)
			-> Add the required components in MenuItems as shown below
		Ex: {
				path: '/dashboard', title: 'Index', type: 'link', icon: 'dashboard', badgeClass: 'success', badgeValue: '1', active: true,
			},
			{
				title: 'Charts', icon: 'assessment', type: 'sub', active: false,
				children: [
				{ path: '/charts/apex', title: 'Apex Chart', type: 'link', active: false },
				{ path: '/charts/chartjs', title: 'Chartjs Chart', type: 'link', active: false },
				{ path: '/charts/chartlist', title: 'Chartlist Chart', type: 'link', active: false },
				{ path: '/charts/echarts', title: 'Echart Chart', type: 'link', active: false },
				]
			},
			-> If there is only one component in the module you can assign it directly as dashboard.
			-> If there are more than one component you can use children to assign all components.
			
			-> The name /charts , /dashboard should need to match with the path name in the routers - full.routers.ts
			-> The name /apex, /chartjs, /chartlist, /echarts  should need to be matched with the corresponding path in charts.routing.ts
			-> Import the charts.routing.ts in the charts.module.ts

|   |   ├── app-routing.module.ts
		{ path: 'login', component: AuthenticationComponent },
	-> To assign the path directly like the login or landing page make sure that you included that in angular.module.ts
	-> Make sure that you include declarations of login or landingpage components in angular.module.ts

|   |   ├── app.component.html
|   |   ├── app.component.scss
|   |   ├── app.component.spec.ts
|   |   ├── app.component.ts
|   |   └── app.module.ts
	-> Make sure that you import the sharedModule 
	-> If you are using any component rather than the AppComponent make sure that you include that components in declarations.