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 相关文章推荐
js跨域和ajax 跨域问题的实现思路
Sep 05 Javascript
jquery photoFrame 图片边框美化显示插件
Jun 28 Javascript
javascript写的简单的计算器,内容很多,方法实用,推荐
Dec 29 Javascript
JS 精确统计网站访问量的实例代码
Jul 05 Javascript
javascript 中__proto__和prototype详解
Nov 25 Javascript
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
Dec 15 Javascript
利用jQuery实现一个简单的表格上下翻页效果
Mar 14 Javascript
Angular2监听页面大小变化的解决方法
Oct 09 Javascript
深入理解node.js http模块
Jan 24 Javascript
基于webpack4搭建的react项目框架的方法
Jun 30 Javascript
详解angularjs跨页面传参遇到的一些问题
Nov 01 Javascript
tweenjs缓动算法的使用实例分析
Aug 26 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
php分页思路以及在ZF中的使用
2012/05/30 PHP
Laravel修改验证提示信息为中文的示例
2019/10/23 PHP
javascript中关于break,continue的特殊用法与介绍
2012/05/24 Javascript
Jquery实现仿新浪微博获取文本框能输入的字数代码
2013/02/22 Javascript
基于MVC3方式实现下拉列表联动(JQuery)
2013/09/02 Javascript
讨论html与javascript在浏览器中的加载顺序问题
2013/11/27 Javascript
js利用数组length属性清空和截短数组的小例子
2014/01/15 Javascript
JavaScript中的some()方法使用详解
2015/06/09 Javascript
深入解读JavaScript中的Hoisting机制
2015/08/12 Javascript
JavaScript学习小结(7)之JS RegExp
2015/11/29 Javascript
深入浅析AngularJS中的module(模块)
2016/01/04 Javascript
JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
2016/12/14 Javascript
Extjs让combobox写起来简洁又漂亮
2017/01/05 Javascript
JS开发中百度地图+城市联动实现实时触发查询地址功能
2017/04/13 Javascript
nodejs async异步常用函数总结(推荐)
2017/11/17 NodeJs
详解react-redux插件入门
2018/04/19 Javascript
Vue.js 时间转换代码及时间戳转时间字符串
2018/10/16 Javascript
详解JavaScript的内存空间、赋值和深浅拷贝
2019/04/17 Javascript
手机浏览器唤起微信分享(JS)
2020/10/11 Javascript
Vue toFixed保留两位小数的3种方式
2020/10/23 Javascript
Vue页面渲染中key的应用实例教程
2021/01/12 Vue.js
介绍Python中内置的itertools模块
2015/04/29 Python
Python的gevent框架的入门教程
2015/04/29 Python
Python selenium根据class定位页面元素的方法
2019/02/26 Python
ubuntu上安装python的实例方法
2019/09/30 Python
解决Keras中CNN输入维度报错问题
2020/06/29 Python
Python使用socket模块实现简单tcp通信
2020/08/18 Python
Python日志器使用方法及原理解析
2020/09/27 Python
CSS3 绘制BMW logo实的现代码
2013/04/25 HTML / CSS
IFCHIC台湾:欧美国际设计师品牌
2019/05/18 全球购物
安全责任书范文
2014/03/12 职场文书
完整版商业计划书
2014/09/15 职场文书
卖房授权委托书样本
2014/10/05 职场文书
父亲婚礼答谢词
2015/01/04 职场文书
2015新生加入学生会自荐书
2015/03/24 职场文书
2015年卫生监督工作总结
2015/05/21 职场文书