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. ansible中文手册-基础模块使用

    此篇文章主要是翻译ansible官网文档而来,在里面讲述了如何使用ansible的基础模块,总体感觉比较晦涩,但是后面会写出自己相关实践的文档,从而更加通俗易懂,官网的东西拿来当手册偶尔翻翻也是很不错 ...

  2. spark的环境安装

    1.安装sbt 正常安装流程. 在cmd里运行的时候,要提前设置代理(如果上网有代理),set JAVA_OPTS=-Dhttp.proxySet=true -Dhttp.proxyHost=172. ...

  3. geeksforgeeks@ Sorting Elements of an Array by Frequency (Sort)

    http://www.practice.geeksforgeeks.org/problem-page.php?pid=493 Sorting Elements of an Array by Frequ ...

  4. dom 侧栏分享

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  5. phonegap,Cordova 使用html5标签

    某些安卓手机的webview使用location.href="tel:123456"不能调到打电话的界面,可以用下面的解决办法: config.xml文件最后加上一行: <a ...

  6. onAttachedToWindow()在整个Activity生命周期的位置及使用

    onAttachedToWindow在整个Activity的生命周期中占据什么位置? 为什么要在onAttachedToWindow中修改窗口尺寸? 一.onAttachedToWindow在Acti ...

  7. Mysql捕捉(网站)应用执行的语句

    如题,很多时候我们需要知道某个程序或者网站链接到额数据库到底执行了什么语句,对于MSsql来说, 比较简单,有相对应的事件查看器,但是对于mysql来说,并没有这个组件或者相关配套工具,此时我们可以 ...

  8. Win7 SP1语言包微软官方下载地址及使用方法 2

    情形一:如果您的系统版本是企业版.旗舰版,可以在Windows update中检测语言包按照提示下载安装即可.如果觉得Windows update不方便的话,可以在本文第二部分中下载所需的语言包,下载 ...

  9. [置顶] 我的设计模式学习笔记------>Java设计模式总概况

    设计模式的概念最早起源于建筑设计大师Alexander的<建筑的永恒方法>一书,尽管Alexander的著作是针对建筑领域的,但是他的观点实际上用用于所有的工程设计领域,其中也包括软件设计 ...

  10. ManagementFactory (二) getMemoryMXBean

    MemoryMXBean package cn.zno.outofmomery; import java.lang.management.ManagementFactory; import java. ...