Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD
Build lego disney princess castle | Making princess castle | Sewing Unicorn | Build lego smoothie van | Solve frozen elsa puzzle | Taj mahal jigsaw puzzle | Statue of liberty jigsaw puzzle | Coloring a cat | Frozen elsa and anna jigsaw puzzle | Build lego disney princess castle | Making princess castle | Sewing Unicorn | Build lego smoothie van | Solve frozen elsa puzzle | Taj mahal jigsaw puzzle | Statue of liberty jigsaw puzzle | Coloring a cat | Frozen elsa and anna jigsaw puzzle

Grouping routes and creating component less route in angular

Suggested Videos
Part 32 - Creating feature module in angular | Text | Slides
Part 33 - Creating feature routing module in angular | Text | Slides
Part 34 - Creating shared module in angular | Text | Slides

In this video we will discuss
  • Grouping routes
  • Creating a component less route

Consider the following routes in employee-routing.module.ts file

const appRoutes: Routes = [
  { path: 'list', component: ListEmployeesComponent },
  { path: 'create', component: CreateEmployeeComponent },
  { path: 'edit/:id', component: CreateEmployeeComponent },

];


In our upcoming videos we will discuss lazy loading angular module. One of the requirements to be able to lazy load an angular module is the following.

All the routes in an angular module that you want to lazy load should have the same route prefix.

At the moment, the above 3 routes does not have a common route prefix. To achieve this, modify the above route configuration as shown below.

const appRoutes: Routes = [
  {
    path: 'employees',
    children: [
      { path: '', component: ListEmployeesComponent },
      { path: 'create', component: CreateEmployeeComponent },
      { path: 'edit/:id', component: CreateEmployeeComponent },
    ]
  }
];

Code explanation :
  • Notice we have a parent route with path employees
  • The parent 'employees' route has 3 child routes
  • All the 3 child routes will be pre-fixed with the parent route path - employees
  • Notice the parent route(employees) does not have a component associated with it. That is why this route is called a component less route.
With the above route configuration, we have the following routes
Route Path Description
/employees Displays the list of all employees
/employees/create Allows to create a new employee
/employees/edit/1 Allows to create a edit an existing employee

Notice now, all the routes in this module have the same route prefix. In our upcoming videos we will discuss lazy loading an angular module.

Update the routes in the navigation menu in app.component.html

<li>
    <a routerLinkActive="active" routerLink="employees">List</a>
</li>
<li>
    <a routerLinkActive="active" routerLink="employees/create">Create</a>
</li>

In list-employees.component.ts, modify the code to redirect to the new EDIT route (employees/edit/id)

editButtonClick(employeeId: number) {
  this._router.navigate(['/employees/edit', employeeId]);
}

In create-employee.component.ts, modify the code to redirect to the new 'employees' route

onSubmit(): void {
  this.mapFormValuesToEmployeeModel();
  if (this.employee.id) {
    this.employeeService.updateEmployee(this.employee).subscribe(
      () => this.router.navigate(['employees']),
      (err: any) => console.log(err)
    );
  } else {
    this.employeeService.addEmployee(this.employee).subscribe(
      () => this.router.navigate(['employees']),
      (err: any) => console.log(err)
    );
  }
}

angular 6 tutorial for beginners

No comments:

Post a Comment

If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.