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()

    : 可以处理 get 和 post 请求,但查找优先级由高到低为req.params→req.body→req.query

例如:

获取表达post的参数

var username=req.body.name;//获取post参数
var password=req.body.password;

获取get参数

访问URL:http://localhost:3000/test?id=110&password=120

获取代码:

app.get(‘/test‘,function(req,res){
    res.send("id: "+req.query.id+"  password: "+req.query.password);
})

结果:

一. *通配URL

例如:

app.get(‘/test/*‘,function(req,res){
    res.send(req.originalUrl);//req.originalUrl获取当前URL
});

*号可以通配URL为localhost:3000/test/.......的URL

运行结果:

二. /:id的占位标识符URL

例如:

app.get(‘/test/:userid‘,function(req,res){
    res.send("userid: "+req.params.userid);//req.params.userid获取userid的值
});

运行结果:

不能继续使用/ 

三.next()权限控制转移

express的路由控制有个next()功能,在定义了多个路由的时候,使用next对匹配的url会按顺序执行,

如果不使用next进行权限转移,只会执行第一个满足的路由规则。

<span class="token comment">next() 函数用于将当前控制权转交给下一步处理,如果给 next() 传递一个参数时,表示出错信息</span>

例如:

app.get(‘/test/*‘,function(req,res,next){
    //res.send("userid:");//要进行转移,不要响应客户端
req.temp="给你控制权";
    next();//把权限转移到下一个路由
});
app.get(‘/test/next‘,function(req,res){
    res.send("content: "+req.temp);
})

访问URL:http://localhost:3000/test/next满足这两个路由规则

运行结果:

next()一般用来编写中间件

  • 中间件一般不直接对客户端进行响应,而是对请求进行一些预处理,再传递下去;
  • 中间件一般会在路由处理之前执行;

比如:

// 检查用户是否登录中间件,所有需要登录权限的页面都使用此中间件
function checkLogin (req, res, next) {
  if (req.session.user) {
    next();//检验到用户已登入,转移权限阁下一个路由
  } else {
    res.redirect(‘/‘);//否则,页面重定位,不执行下面路由
  }
}

满足了通配符*和next()两个条件(需要传入),就可以使得二级路由获得权限了。

app.get(‘/*‘, function (req, res, next) {
// 就是不能有这一句
// res.sendFile(__dirname + ‘/../dist/index.html‘);
// 上面这一句其实是无关紧要的,并不需要它就可以访问第一个路由
    req.temp="给你控制权";
 next();
});
app.get(‘/test‘,function(req,res){
    res.send("content: "+req.temp);
})

静态目录其实已经在app.use的时候指定了

app.use(‘/‘, express.static(__dirname + ‘/../dist‘));
app.use(‘/scripts‘, express.static(__dirname + ‘/../node_modules‘));

res.sendFile之后next或者在获取了控制权的下一级路由中写这一句,都会报Forbidden的。

这是单纯node中路由的跳转,在angular2中,不会去加载另一个html文件,还是要用angular自己的方式实现,参看 Angular2 路由教程 3 - 子模块以及异步加载(https://gold.xitu.io/entry/58523aa91b69e6006c7e63ac)

如果像一般的starter那样把todo相关的路由定义在一个文件中,然后在app的路由定义中把所有路由合并到一起。todo.routes.ts的内容如下:

// 省略import
export const TodoRoutes: Route[] = [
    {
        path: ‘todo‘,
        canActivateChild: [MyTodoGuard],
        children: [
            { path: ‘list‘, component: TodoListComponent, resolve: { todos: MyTodoResolver } },
            { path: ‘detail/:id‘, component: TodoDetailComponent, canDeactivate: [ CanLeaveTodoDetailGuard ] }
        ]
    }
];

然后在app.routes.ts中定义一个路由模块:

const routes: Routes = [
    { path: ‘‘, redirectTo: ‘/home‘, pathMatch: ‘full‘ },
    { path: ‘home‘, component: HomeComponent },
    ...TodoRoutes // 这里就是将TodoRoutes列表里的内容合并到routes
];
@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule { }

最后,在AppModule里面引入这个路由模块。

这种方式实现的路由无法实现子模块的延时加载,要实现延时加载,首先要将todo模块的路由修改成子路由模块,也就是要修改todo.routes.ts

// 省略import
export const TodoRoutes: Route[] = [
    {
        path: ‘todo‘,
        canActivateChild: [MyTodoGuard],
        children: [
            { path: ‘list‘, component: TodoListComponent, resolve: { todos: MyTodoResolver } },
            { path: ‘detail/:id‘, component: TodoDetailComponent, canDeactivate: [ CanLeaveTodoDetailGuard ] }
        ]
    }
];
// 通过下面的方式定义了一个子路由模块
@NgModule({
  imports: [ RouterModule.forChild(TodoRoutes) ],
  exports: [ RouterModule ]
})
export class TodoRoutingModule { } 

这里定义了一个子路由模块,TodoRoutingModule,它使用RouterModule.forChild(TodoRoutes)来创建。跟整个App的路由模块比较的话,主路由模块使用RouterModule.forRoot(routes)来定义。

定义好了子路由模块,在子模块里面引入它既可:

// 省略import
@NgModule({
  imports: [CommonModule, FormsModule, TodoRoutingModule ],
  declarations: [TodoListComponent, TodoDetailComponent, TodoItemComponent],
  providers: [TodoService, MyTodoResolver, MyTodoGuard, CanLeaveTodoDetailGuard]
})
export class TodoModule {}

这样就定义好了一个子模块。当用户打开/todo/list/todo/detail/*时,这个子模块里面的相关页面就会展示,它也不会跟其他模块有任何交互。也就是说,进入和离开这个子模块,都是通过路由跳转实现。这个子模块也是完全独立的,可以独立开发,也可以很容易就用到其他应用里面。

时间: 2024-10-20 21:29:12

angular2地址栏读取路由的相关文章

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中的根模块对应

node.js 模块和读取路由中获取信息

模块很类似于Java中的类,也是可以继承的,有自己的变量和方法 nj_dome.js var http = require('http'); var User = require("./model/User");//导入user的模块 var Teacher = require("./model/Teacher");//导入teacher的模块 http.createServer(function (request, response) { response.wri

Vue路由-ie上地址栏输入路由页面不更新

情景:在ie11地址栏上直接输入路由,开发环境页面能正常刷新,在测试环境上不更新也不报错.测试环境在火狐.chrome浏览器地址栏上直接输入路由能正常更新页面.但是在App.vue中添加以下代码后,测试环境在ie11也能正常更新页面.闲话不多说,上代码: const IE11RouterFix = { methods: { hashChangeHandler: function() { this.$router.push(window.location.hash.substring(1, win

Angular2官网项目 (4)--路由

        完整项目地址:https://github.com/lixinsong123/heroGuide 行动计划      把AppComponent变成应用程序的"壳",它只'处理导航' 把现在由AppComponent关注的英雄们移到一个独立的GeneralComponent中 添加路由 创建一个新的DashboardComponent组件 把仪表盘加入导航结构中 路由是导航的另一个名字.路由器就是从一个视图导航到另一个视图的机制. 拆分Appcomponent.    

vue-router路由传参之query和params

首先简单来说明一下$router和$route的区别 //$router : 是路由操作对象,只写对象 //$route : 路由信息对象,只读对象 //操作 路由跳转 this.$router.push({ name:'hello', params:{ name:'word', age:'11' } }) //读取 路由参数接收 this.name = this.$route.params.name; this.age = this.$route.params.age; 1·query传递参数

2、消失的路由,源码的解析基础

0.目录结构 1.看完上一章,一定会发现 路由消失了,这章看一下ionic的初始化项目的源码. /* --- app.js ----*/ import {ViewChild} from '@angular/core'; import {App, Platform, MenuController} from 'ionic-angular'; import {StatusBar} from 'ionic-native'; import {HelloIonicPage} from './pages/h

Trying to get property of non-object_thinkphp路由报错

在阅读<thinkphp5.0快速入门>这本书时,模型基础这一节碰到一点路由上的问题.在此随笔记一下. 碰到的问题: [8] ErrorException in UserController.php line 43 Trying to get property of non-object Controller.php public function read($id=''){    $user = Usermodel::get($id);    echo "-----------fu

Angular2学习笔记——路由器模型(Router)

Angular2以组件化的视角来看待web应用,使用Angular2开发的web应用,就是一棵组件树.组件大致分为两类:一类是如list.table这种通放之四海而皆准的通用组件,一类是专为业务开发的业务组件.实际开发中大部分时间我们都需要处理业务组件.对于SPA应用来说,一个通用的问题就是如何控制页面的切换,解决这个问题的通用方法就是利用路由器来实现. 路由配置 现在我们先撇开Angular2来看看通用的路由器模型.通常来讲SPA应用需要路由配置信息: [ { path: '', pathMa

基于MEAN全栈架构的多用户博客系统(Angular2+Node+MongoDB)

基于MEAN全栈架构的多用户博客系统(Angular2+Node+MongoDB)课程学习地址:http://www.xuetuwuyou.com/course/223课程出自学途无忧网:http://www.xuetuwuyou.com 课程介绍一.课程简介MEAN是一个Javascript平台的现代Web开发框架总称,它是MongoDB + Express +AngularJS + NodeJS 四个框架的第一个字母组合.它与传统LAMP一样是一种全套开发工具的简称.本课程结合项目全面系统的