去掉angularjs路由的#,node为服务器

前端之家收集整理的这篇文章主要介绍了去掉angularjs路由的#,node为服务器前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

#或#!是angular路由的特征,但是有时候我们由于种种原因不愿意去使用它。参考这篇资料之后,

http://blog.fens.me/angularjs-url/

发现无法解决。于是自己捣鼓。各种心酸,终于解决了。
解决了两个问题:

  • 去掉#
  • 刷新页面时仍然能匹配到对应的路由

angular代码

在angular应用配置中添加

angular.module('myApp')
.config(function($locationProvider) {
  $locationProvider.html5Mode(true)
})

首页应用中添加
base('/')
基本上网上能查到的这两步都有,但是用node做服务器的时候服务器端的处理才是最重要的。

node代码

根据上述参考文章(无法解决),做出修改

app.use('/',function (req,res,next) {
  if (req.path.indexOf('/api') >= 0) {
    res.send('server api');
    next(); 
  } else {
    res.sendFile(__dirname + '/static/index.html');
  }
})

// 另外的api请求
app.get('/api/validate',res) {
  console.log(1);
})

如果不加next(),那么这一段会匹配所有的路由,那么下面的app.get('/api/validate')不会执行。

为什么用app.use('/'),而不是app.get('/')呢?正是因为这个才导致刷新页面能不能正确跳转的问题。原因和上一个类似,app.get('/')会精确匹配路由,也就是说,这样写它只会匹配/路由,而app.use('/')能够匹配参数中的路由以及它的子路由,也就是说app.use('/')能匹配所有的路由,所有的页面刷新后都会被它处理。

在我的代码中,首先它会在url中查找有没有/api字符串,如果有,那么就是逻辑处理部分,即后端路由。经过处理后,我们使用next()来将路由交给别的处理(app.get('/api/validate'))。如果没有,代表前端路由,那么会res.sendFile(__dirname + '/static/index.html');。先进入这个页面,这个页面中有<div ng-view><div>。然后将url中/后面的内容交给angularjs路由处理。比如:在刷新页面后,

  • localhost:3000/login,这个url,经过res.sendFile(__dirname + '/static/index.html');后,那么/login会交给angularjs路由部分处理。
  • localhost:3000/api/validate,这个url,在调用next()后,app.get('/api/validate')准确匹配到路由,打印出1。

这样就解决了刷新后正确匹配路由的问题

原文链接:https://www.f2er.com/angularjs/148417.html

猜你在找的Angularjs相关文章