[Angular2 Router] Configuring a Home Route and Fallback Route - Learn An Essential Routing Concept

In this tutorial we are going to learn how to configure the Angular 2 router to cover some commonly used routing scenarios: what if the user goes to the root of the application manually ? Probably you would want some sort of home page to be displayed. Also another very common scenario is: what should be the behaviour of the application when an unknown url is accessed? We are already know that in the server everything is getting redirected to the index.html file, so how do we handle this on the client?

We are going to answer those questions by learning how to configure the angular 2 router to have both an index or home route, and a fallback route. We are also going to learn an essential concept about routing configuration.

app.routes.ts:

import {RouterModule} from "@angular/router";
import {NotFoundComponent} from "./shared-components/not-found/not-found.component";

const indexRoute = {path: ‘‘, loadChildren: ‘app/home/home.module‘};
const fallbackRoute = {path: ‘**‘, component: NotFoundComponent};
const routes = [
  {path: ‘home‘, loadChildren: ‘app/home/home.module‘, name: ‘Home‘},
  {path: ‘heros‘, loadChildren: ‘app/heros/heros.module‘, name: ‘Heros‘},
  {path: ‘contact‘, loadChildren: ‘app/contact/contact.module‘, name: ‘Contact‘},
  indexRoute,
  fallbackRoute
];

export default RouterModule.forRoot(routes);

Notice here, the order does matter, if put fallbackRoute to the first place, it will error out.

Github

时间： 2025-01-31 07:44:46

[Angular2 Router] Configuring a Home Route and Fallback Route - Learn An Essential Routing Concept的相关文章

[Angular2 Router] Load Data Based on Angular 2 Route Params

You can load resource based on the url using the a combination of ActivatedRouteand Angular 2’s Http service. Since the params and Http are both streams, you can use RxJS to get the data off the param then switchMap over to an Http request using that

[Angular2 Router] Resolving route data in Angular 2

From Article: RESOLVING ROUTE DATA IN ANGULAR 2 Github If you know Anuglar UI router, you must know resolve function in ui router, which you can load data before template and controller get inited. In Angular2 router, you can also use resovler. The r

[Angular2 Router] Optional Route Query Parameters - The queryParams Directive and the Query Parameters Observable

In this tutorial we are going to learn how to use the Angular 2 router to pass optional query parameters from one route into another route. There are couple of ways of doing this from the source route perspective: we use the queryParams property in t

Angular2 Router

1 import Router import {RouteConfig, RouterOutlet, RouterLink, routerInjectables} from 'angular2/router'; 2 setting your RouteConfig @RouteConfig([ {path: '/', component: List, as: 'list'}, {path: '/about', component: Add, as: 'add'}, {path: '/help',

[Angular2 Router] Setup page title with Router events

Article import 'rxjs/add/operator/filter'; import 'rxjs/add/operator/map'; import 'rxjs/add/operator/mergeMap'; import { Component, OnInit } from '@angular/core'; import { Router, NavigationEnd, ActivatedRoute } from '@angular/router'; import { Title

CCNP - LAB BGP Route Reflectors and Route Filters

Topology Objectives Configure iBGP routers to use a route reflector and simple router filter. Background The International Travel Agency maintains a full-mesh iBGP network that has quickly scaled beyond 100 routers. The company wants to implement rou

[Angular2 Router] CanActivate Route Guard - An Example of An Asynchronous Route Guard

In this tutorial we are going to learn how we can to configure an can activate route guard in the Angular 2 router. We are going to implement the concrete example where a user can only enter a certain route if its authorized to do so. We are also goi

[Angular2 Router] CanDeactivate Route Guard - How To Confirm If The User Wants To Exit A Route

In this tutorial we are going to learn how we can to configure an exit guard in the Angular 2 Router. We are going to learn how to use a CanDeactivate route guard to ask the user if he really wants to exist the screen, giving the user to for example

[Angular2 Router] Exiting an Angular 2 Route - How To Prevent Memory Leaks

In this tutorial we are going to learn how we can accidentally creating memory leaks in our application while using the Angular 2 router. We are going to learn how we can prove that the memory leak is happening, we are going to learn what is causing