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

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

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

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

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

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

angular代码

在angular应用配置中添加

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

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

node代码

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

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

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

如果不加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。

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

猜你在找的Angularjs相关文章