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

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

  1. [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 ...

  2. [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 ...

  3. [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 parame ...

  4. [Angular2 Router] Setup page title with Router events

    Article import 'rxjs/add/operator/filter'; import 'rxjs/add/operator/map'; import 'rxjs/add/operator ...

  5. [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 An ...

  6. [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 ...

  7. [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 applicat ...

  8. [Angular2 Router] Configure Auxiliary Routes in the Angular 2 Router - What is the Difference Towards a Primary Route?

    In this tutorial we are going to learn how we can can configure redirects in the angular 2 router co ...

  9. [Angular2 Router] Programmatic Router Navigation via the Router API - Relative And Absolute Router Navigation

    In this tutorial we are going to learn how to navigate programmatically (or imperatively) by using t ...

随机推荐

  1. Autodesk Stingray 游戏引擎

    Autodesk的游戏引擎质量够高的. http://v.youku.com/v_show/id_XMTMwMjc0MDIwMA==.html?qq-pf-to=pcqq.group http://v ...

  2. 【LeetCode】100 - Same Tree

    Given two binary trees, write a function to check if they are equal or not. Two binary trees are con ...

  3. 跨站脚本攻击(Cross‐Site Scripting (XSS))实践

    作者发现博客园在首页显示摘要时未做html标签的过滤,致使摘要中的html代码可以被执行,从而可以注入任何想要被执行的js代码,作者利用这一缺陷在本文摘要中插入了一段js代码执行alert弹窗,同时增 ...

  4. 使用Go开发一个简单的服务器程序

    最近有个小项目,需要一个简单的后台程序来支撑,本来想用Nodejs来做,但是由于本人js一直很菜,并且很讨厌callback,虽然我也很喜欢异步模型,但我一直都觉得JS是反人类的.后台就用了go处理, ...

  5. linux下安装subversion出现libtool: link: only absolute run-paths are allowed

    configure时加上 --with-apache-libexecdir=/usr/local/apache

  6. 一种将Region转为Polyline的方法

    在AutoCAD.NET二次开发中,如果要将面域转为Polyline主要有以下几种方式: 1.使用Explode将面域炸成Line和Arc,然后再串起来,此方法可用于AutoCAD2007开始的所有版 ...

  7. Android_UI_点击按钮切换背景效果实现

    实现按钮按下和释放,按钮背景图片相应切换效果的方法这里介绍两种,一种是在代码里实现,另一种是在xml文件里实现 一.在xml文件里 首先现在layout的一个xml文件下定义Button如下所示: [ ...

  8. 使用Map List 封装json数据

    <dependency> <groupId>net.sf.json-lib</groupId> <artifactId>json-lib</art ...

  9. tableviewcell 系统工具删除:左滑删除,选中多个删除

    在编辑tableview的时候,我们有时候会需要编辑对一些cell进行删除(增加),在这个时候,我们最好用系统的方法来进行增删的操作 // // text1Controller.m // text / ...

  10. weblogic日志小结

    weblogic日志小结 http://blog.csdn.net/forest_hou/article/details/5468222