Angular2中的路由(简单总结)

Angular2中建立路由的4个步骤:

1、路由配置:最好新建一个app.toutes.ts文件(能不能用ng命令新建有待调查)

Angular2中路由要解决的是URL与页面的对应关系(比如URL是http://localhost:4200/all-people,那么页面显示的就应该是allPeople画面,URL是http://localhost:4200/first-come,页面显示的就应该是firstCome画面)。

在Angular2中页面是由组件组成的(Angular2中的根模块对应的根组件就表示了整个应用,应用也可以说成只有一个组件,也就是一个页面,这就是单页面应用的由来吧),所以路由解决的是URL与组件的对应关系。

这个需要一个数据,它用来表示url与组件的对应关系,Angular2中把这个数据叫作“路由配置”

// 需要从路由模块中引入Routes类
import { Routes } from ‘@angular/router‘;
// 对于需要用url链接的组件,需要从文件中导入
import { AllPeopleComponent } from ‘./all-people/all-people.component‘;
import { HomePageComponent } from ‘./home-page/home-page.component‘;
// export 导出供其他模块导入   这是一个数组,数组中没一个元素是一个对象,最常见的是这个对象有2个属性,分别是path(对应url)和component(对应组件),直观上url中输入一个路径,在数组中查找path,如果有对应的话就在指定区域显示与path对应的组件。
export const rootRouterConfig: Routes = [
    {
        path: ‘‘, // http://localhost:4200
        component: HomePageComponent
    },
    {
      path: ‘all-people‘, // http://localhost:4200/all-people
      component: AllPeopleComponent
    },
]

2、在根模块中创建根路由模块。

根路由模块包含了路由所需的使用服务,它以路由配置为参数,调用RouterModule.forRoot()方法来创建。

这里还有路由策略的问题,会在后续再补充

// 在根模块中导入路由配置
import { rootRouterConfig } from ‘./app.routes‘; // 注意没有.ts
// 需要调用RouterModule.forRoot()方法
import { RouterModule } from ‘@angular/router‘;// 创建路由模块const rootRouterModule: ModuleWithProviders = RouterModule.forRoot(rootRouterConfig);
// 根路由模块默认提供的路由策略为PathLocationStrategy(另外一个是HashLocationStrategy)。
// PathLocationStrategy路由策略需要一个base路径,设置base路径有2种方式,最简单的是在index.html中设置<base>
 // 路由策略:pathLocationStrategy // const rootRouterModule: ModuleWithProviders = RouterModule.forRoot(rootRouterConfig); // 路由策略:HashLocationStrategy // const rootRouterModule: ModuleWithProviders = RouterModule.forRoot(rootRouterConfig, {useHash: true});  @NgModule({ declarations: [], // 导入路由模块
  imports: [rootRouterModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3、添加组件存放的区域,使用RouterOutlet指令

这个指令就是在页面上预留一个区域,当url改变时匹配路由配置中的path,匹配成功后就将与path对应的component加载到这个区域里。

一般情况下,这个指令是放在根组件中,但也会有子组件路由同一父组件的子组件的情况。

<section class="container">
    <router-outlet></router-outlet>
</section>

到目前为止,一个简单的路由就基本配置完成了,只要在url中输入正确的path,就能显示对应的组件。

但是,我们总不能跳转页面时还要手动输入url吧,我们的理想方法是通过页面的一些操作(比如点击事件,延迟)改变url,实现path对应的组件显示,这就是路由跳转。

4、路由跳转

如上说的,路由跳转就是为了不要手动改变url,最常见的就是点击事件改变url,实现路由跳转,显示组件。

路由跳转有两种方式:指令跳转和代码跳转。

指令跳转指的是使用RouterlLink指令,该指令接收一个链接参数数组,当事件被触发时,数组中的所有元素与路由配置中的path接收的数组中的元素进行一一对比,全都相等时得以匹配。

RouterLink有一个好的方法,可以指定routerLinkActive = “className”,也就是当RouterLink被激活时可以给相应的html元素添加clas类。神奇地是,routerLinkActive可以作用于父级元素。

        <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li><a [routerLink]="[‘/all-people‘]">allPeople</a></li>
                <li><a [routerLink]="[‘/first-come‘]">firstCome</a></li>
                <li><a [routerLink]="[‘/last-leave‘]">lastLeave</a></li>
                <li><a [routerLink]="[‘/form‘]">newPerson</a></li>
                <li><a [routerLink]="[‘/bugManage‘]">bugManage</a></li>
            </ul>
        </div>

需要特别注意的是:RouterLink指令仅响应click事件(码源分析以后补上),要想响应其他(比如延迟显示)事件,就要用到代码跳转。

以上是Angular2中路由的基本用法,一些细节和关键的步骤会在后续更新,比如URL带参数,页面如何取得url的值,代码跳转和指令跳转的区别,路由策略的区别,子路由。。。。。

新手,有问题欢迎大家指正。。。

时间: 2024-11-07 13:03:04

Angular2中的路由(简单总结)的相关文章

vue2.0学习笔记之webpack-simple模板中的路由简单配置案例

以下是完成后的目录结构 案例基础是已经用 webpack+vue-cli 创建了一个名为 vue_router的工程 , 并安装了vue-router 1.  定义组件 1.1 先在 src 目录下创建组件文件夹 components , 添加两个文件Home.vue 和 News.vue, 代码如下: Home.vue   (推荐首字母大写) <template> <h3>主页</h3> </template> News.vue <template&

Angular杂谈系列1-如何在Angular2中使用jQuery及其插件

jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大多基于jQuery和它的插件.而且现在Angular2的组件生态还不是很完善,我们在编写Angular的时候也许会想要用到jQuery.本篇文章就简单介绍下在Angular2中使用jQuery 如果你不知道怎么搭建Angular2开发环境,请参考我之前写这篇文章:Angular2入门系列教程1-使用

Yaf零基础学习总结8-Yaf中的路由和路由协议

路由器主要负责解析一个请求并且决定什么module.controller.action被请求:它同时也定义了一种方法来实现用户自定义路由,这也使得它成为最重要的一个MVC组组件.为了方便自定义路由, Yaf摒弃了0.1版本中的自定义路由器方式, 而采用了更为灵活的路由器和路由协议分离的模式.也就是一个固定不变的路由器, 配合各种可自定义的路由协议, 来实现灵活多变的路由策略. 作为一个应用中的路由组件是很重要的,理所当然的路由组件是抽象的,这样允许作为开发者的我们很容易的设计出我们自定义的路由协

【Web API系列教程】2.1 — ASP.NET Web API中的路由机制

这篇文章描述了ASP.NET Web API如何将HTTP请求发送(路由)到控制器. 备注:如果你对ASP.NET MVC很熟悉,你会发现Web API路由和MVC路由非常相似.主要区别是Web API使用HTTP方法来选择动作(action),而不是URI路径.你也可以在Web API中使用MVC风格的路由.这篇文章不需要ASP.NET MVC的任何知识. 路由表 在ASP.NET Web API中,控制器是一个用于处理HTTP请求的类.控制器中的公共方法被称为动作方法或简单动作.当Web A

ASP.NET MVC 3中的路由

准备发布新随笔,才发现草稿里还有几年前这篇烂了尾的,先放上来,有空再补完整吧-- (* 整理自<Pro ASP.NET MVC 3 Framework>学习笔记. *) 路由,正如其名,是决定消息经由何处被传递到何处的过程.也正如网络设备路由器Router一样,ASP.NET MVC框架处理请求URL的方式,同样依赖于一张预定义的路由表.以该路由表为转发依据,请求URL最终被传递给特定Controller的特定Action进行处理.而在相反的方向上,MVC框架的渲染器同样要利用这张路由表,生成

angular2地址栏读取路由

这关乎于Nodejs的express路由规则(http://hm4123660.iteye.com/blog/2195035) express 封装了多种 http 请求方式,我们主要只使用 get和post,可以使用 app.all 获取所以请求方式,回调函数有两个参数分别是 req 和 res,代表请求信息和响应信息. req.query : 处理 get 请求 req.params : 处理 /:xxx 形式的 get 请求 req.body : 处理 post 请求 req.param(

.NetCore MVC中的路由(2)在路由中使用约束

.NetCore MVC中的路由(2)在路由中使用约束 0x00 路由模板中的约束 在配置路由模板时,除了以静态字符和变量的形式外,还可以通过配置对变量进行约束.实际如果不嫌麻烦的话在路由到的Action中对变量进行检查也是一种方法,不过对于变量的通用的约束当然是放在路由层面更加合适.而且这样做会简化Action的代码,使Action更加专注于自身业务,符合AOP的思路.这篇文章主要介绍路由模板中的约束. 0x01 在路由模板中使用约束 在路由模板中使用约束是很简单的,如下所示: {contro

关于AngularJs中的路由学习总结

AngularJs中的路由,应用比较广泛,主要是允许我们通过不同的url访问不同的内容,可实现多视图的单页web应用.下面看看具体怎么使用. 关于路由  通常我们的URL形式为http://jtjds.cn/first/page,但在单页web应用中angularjs通过#+标记实现,比如下面的页面,将是下文中的路由列子. http://192.168.1.109:8000/angular-program/src/main.html#/pagetable/page1 http://192.168

Web API中的路由(一)——基本路由

一.Web API中的路由概念 路由的作用用一句话说明:通过request的uri找到处理该请求的Controller,Action,以及给Action的参数赋值. web api中默认的路由: routes.MapHttpRoute( name: "API Default", routeTemplate: "api/{controller}/{id}", defaults: new { id = RouteParameter.Optional } );  rout