Angular 5.x 学习笔记之Router(路由)应用


Posted in Javascript onApril 08, 2018

序言:

Angular APP 视图之间的跳转,依赖于 Router (路由),这一章,我们来讲述 Router 的应用

实例讲解

运行结果如下。 设置了3个导航栏, Home、 About、Dashboard。 点击不同的导航栏,跳转到相应的页面:

Angular 5.x 学习笔记之Router(路由)应用

创建3个 component

  1. ng g c home
  2. ng g c about
  3. ng g c dashboard

路由与配置

(1)**引入 Angular Router **

当用到 Angular Router 时,需要引入 RouterModule,如下:

// app.module.ts
import { RouterModule } from '@angular/router';
imports: [
 BrowserModule, RouterModule
],

(2) 路由配置

还记得由谁来管理component 的吧,没错,由 module 来管理。 所以,把新创建的 component,引入到 app.moudle 中。 如下:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

import { appRoutes } from './routerConfig';

import { AppComponent } from './app.component';
import { AboutComponent } from './components/about/about.component';
import { HomeComponent } from './components/home/home.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';

提示: 注意component的路径,为便于管理,我们把新创建的component 移到了 components 文件夹中。

创建 Router Configure 文件

在 app 目录下, 创建 routerConfig.ts 文件。 代码如下:

import { Routes } from '@angular/router';
import { HomeComponent } from './components/home/home.component';
import { AboutComponent } from './components/about/about.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';

export const appRoutes: Routes = [
 { path: 'home', 
 component: HomeComponent 
 },
 {
 path: 'about',
 component: AboutComponent
 },
 { path: 'dashboard',
 component: DashboardComponent
 }
];

说明: Angular 2.X 以上版本,开始使用 TypeScript 编写代码,而不再是 JavaScript,所以,文件的后缀是: ts 而不是 js

这个 routerConfigue 文件,怎么调用呢? 需要把它加载到 app.module.ts 中,这是因为 app.moudle.ts 是整个Angular App 的入口。

// app.module.ts
import { appRoutes } from './routerConfig';
imports: [
 BrowserModule,
 RouterModule.forRoot(appRoutes)
],

声明 Router Outlet

在 app.component.html 文件中,添加代码:

<div style="text-align:center">
 <h1>
  {{title}}!!
 </h1>
 <nav>
  <a routerLink="home" routerLinkActive="active">Home</a>
  <a routerLink="about">About</a>
  <a routerLink="dashboard">Dashboard</a>
 </nav>
 <router-outlet></router-outlet>
 </div>

运行

进入到该工程所在的路径, 运行;

ng serve --open

当 webpack 编译成功后,在浏览器地址栏中,输入: http://localhost:4200

即可看到本篇开始的结果。

关于Router,换一种写法:

在 app.moudle.ts 文件中,代码如下 :

imports: [
  BrowserModule,
  RouterModule.forRoot(
  [
   { path: 'home', 
   component: HomeComponent 
   },
   {
   path: 'about',
   component: AboutComponent
   },
   {
   path: 'dashboard',
   component: DashboardComponent
   }
  ]
  )
 ],

这样一来,可以不用单独创建 routerConfigure.ts 文件。

小结

自从引入了面向组件(component)后,路由管理相比 AngularJS (1.X),方便了很多。

进一步优化:

或许你已经注意到,当访问 http://localhost:4200 时,它的路径应该是 “/”, 我们应该设置这个默认的路径。

{
   path: '',
   redirectTo:'/home',
   pathMatch: 'full'
   },

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Mootools 1.2教程 滚动条(Slider)
Sep 15 Javascript
javascript smipleChart 简单图标类
Jan 12 Javascript
JQueryEasyUI datagrid框架的进阶使用
Apr 08 Javascript
网页整体变灰白色(兼容各浏览器)实例
Apr 21 Javascript
jQuery判断iframe中元素是否存在的方法
May 11 Javascript
js/jquery获取文本框输入焦点的方法
Mar 04 Javascript
jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)
Jan 21 Javascript
封装获取dom元素的简单实例
Jul 08 Javascript
动态JavaScript所造成一些你不知道的危害
Sep 25 Javascript
js实现滑动到页面底部自动加载更多功能
Feb 15 Javascript
Bootstrap Table使用整理(三)
Jun 09 Javascript
ionic3 懒加载
Aug 16 Javascript
vue2.0 资源文件assets和static的区别详解
Apr 08 #Javascript
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
Apr 08 #Javascript
vuex 项目结构目录及一些简单配置介绍
Apr 08 #Javascript
JS求Number类型数组中最大元素方法
Apr 08 #Javascript
angular2模块和共享模块详解
Apr 08 #Javascript
vue下拉列表功能实例代码
Apr 08 #Javascript
详解Vue-cli webpack移动端自动化构建rem问题
Apr 07 #Javascript
You might like
DC这些乐高系列动画电影你看过几部?
2020/04/09 欧美动漫
frename PHP 灵活文件命名函数 frename
2009/09/09 PHP
php 无限级分类学习参考之对ecshop无限级分类的解析 带详细注释
2010/03/23 PHP
php输出xml格式字符串(用的这个)
2012/07/12 PHP
php中的一些数组排序方法分享
2012/07/20 PHP
JavaScript 学习笔记(六)
2009/12/31 Javascript
jquery显示和隐藏div特效实例
2013/02/27 Javascript
只需一行代码,轻松实现一个在线编辑器
2013/11/12 Javascript
jquery 字符串切割函数substring的用法说明
2014/02/11 Javascript
struts2+jquery组合验证注册用户是否存在
2014/04/30 Javascript
关于javascript中限定时间内防止按钮重复点击的思路详解
2016/08/16 Javascript
Vue 过渡实现轮播图效果
2017/03/27 Javascript
Vue.js上下滚动加载组件的实例代码
2017/07/17 Javascript
Vue2.0点击切换类名改变样式的方法
2018/08/22 Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
2018/11/29 Javascript
通过实例讲解JS如何防抖动
2019/06/15 Javascript
jquery多级树形下拉菜单的实例代码
2019/07/09 jQuery
[01:00:54]TI4正赛第二日开场
2014/07/20 DOTA
[02:30]联想杯DOTA2完美世界全国高校联赛—北京站现场
2015/11/16 DOTA
[02:43]2018DOTA2亚洲邀请赛主赛事首日TOP5
2018/04/04 DOTA
分享几道你可能遇到的python面试题
2017/07/24 Python
python对日志进行处理的实例代码
2018/10/06 Python
Python直接赋值、浅拷贝与深度拷贝实例分析
2019/06/18 Python
在pyqt5中QLineEdit里面的内容回车发送的实例
2019/06/21 Python
在PyTorch中Tensor的查找和筛选例子
2019/08/18 Python
python GUI库图形界面开发之PyQt5美化窗体与控件(异形窗体)实例
2020/02/25 Python
基于python连接oracle导并出数据文件
2020/04/28 Python
Python中random模块常用方法的使用教程
2020/10/04 Python
如何防止同一个帐户被多人同时登录
2013/08/01 面试题
日语专业推荐信
2013/11/12 职场文书
简历自我评价怎么写呢?
2014/01/06 职场文书
离婚协议书怎么写2014
2014/09/30 职场文书
教师党员自我评价范文
2015/03/04 职场文书
laravel添加角色和模糊搜索功能的实现代码
2021/06/22 PHP
Mysql存储过程、触发器、事件调度器使用入门指南
2022/01/22 MySQL
win10如何更改appdata文件夹的默认位置?
2022/07/15 数码科技