去掉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。

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

相关文章

ANGULAR.JS:NG-SELECTANDNG-OPTIONSPS:其实看英文文档比看中...
AngularJS中使用Chart.js制折线图与饼图实例  Chart.js 是...
IE浏览器兼容性后续前言 继续尝试解决IE浏览器兼容性问题,...
Angular实现下拉菜单多选写这篇文章时,引用文章地址如下:h...
在AngularJS应用中集成科大讯飞语音输入功能前言 根据项目...
Angular数据更新不及时问题探讨前言 在修复控制角标正确变...