如何使用带有HTML5样式URL的Angular路由进行Express路由?

时间:2013-03-04 16:46:57

标签: html5 url express angularjs url-routing

我想制作一个带有HTML5风格URL的AngularJS应用程序(即URL中没有#个片段)。因此,在我的Angular应用程序的路由控制器模块中,我有类似以下内容:

angular.module('app').config(['$routeProvider','$locationProvider',function($routeProvider,$locationProvider) {
    $locationProvider.html5Mode(true)
...
}

$routeProvider
.when('/1/:param', /* do something */)
.when('/2/:param', /* do something else */)
.when('/3/:param', /* do something else again*/);

许多工作示例(如AngularFun)都不使用HTML5模式。对于像http://localhost:3005/#/1/foo这样的请求,很明显

  • http://localhost:3005/部分由Express处理服务器端/。 Express愉快地为我们的Angular启用index.html
  • /1/foo路由由Angular的路由器
  • 在客户端处理

假设我们的server.coffee看起来像标准,如下所示(我们提供包含我们编译的,缩小的Angular源的静态dist目录:

express = require 'express'
routes = require './routes'
dir = "#{__dirname}/dist"            # sources live here
port = process.env.PORT ? process.argv.splice(2)[0] ? 3005
app = express()

app.configure -> 
    app.use express.logger 'dev'
    app.use express.bodyParser()
    app.use express.methodOverride()
    app.use express.errorHandler()
    app.use express.static dir       # serve the dist directory
    app.use app.router
    routes app, dir                  # extra custom routes

如果我们使用HTML5模式,则我们的网址http://localhost:3005/#/1/foo会变为http://localhost:3005/1/foo(不再有哈希#)。这一次,整个URL被Express截获,并且因为我们没有定义/以外的路由而感到困惑。

我们真正想说的是,URL(/1/foo)的后半部分应该“委托”给Angular进行处理。我们怎么能这样说呢?

1 个答案:

答案 0 :(得分:-1)

它似乎一切正常。但是,我自己也没做过这项工作。我依靠这个骨架项目: https://github.com/thanh-nguyen/angular-express-seed-coffee

这允许您对客户端处理哪些路径以及服务器处理哪些路径进行一定程度的控制。