如何拥有与HTML5风格的URL路由角前preSS路由的工作？ [英] How to have Express routing work with Angular routing with HTML5 style URLs?

问题描述

我想提出与HTML5风格的URL的AngularJS应用程序（即在网址中没有＃片段）。因此，我的角应用程序的路由控制器模块中我有类似如下：

<$p$p><$c$c>angular.module('app').config(['$routeProvider','$locationProvider',function($routeProvider,$locationProvider) {
    $ locationProvider.html5Mode（真）
...
}$ routeProvider
。当（'/ 1 /：参数'，/ *做某事* /）
。当（'/ 2 /：参数'，/ *做其他事情* /）
。当（'/ 3 /：参数'，/ *做别的事情再次* /）;

一些如 AngularFun 工作示例不使用HTML5模式。对于像 HTTP请求：//本地主机：3005 /＃/ 1 /富，很明显，

• 在的http：//本地主机：3005 / 部分是服务器端的 / 由前$ P $处理PSS。防爆preSS高兴地服务我们的使角 index.html的

通过角的路由器
• 的 / 1 /富路由处理客户端

说，我们的 server.coffee 看起来，作为标准配置，像下面的（我们所服务的静态 DIST 目录包含我们的编，精缩角来源：

 前preSS =需要'前preSS
路线=需要'./routes
DIR =＃{__目录名} /距离＃来源住在这里
端口= process.env.PORT？ process.argv.splice（2）[0]？ 3005
应用=前$ P $（PSS）app.configure  - ＆GT;
    app.use前press.logger'开发'
    app.use前press.bodyParser（）
    app.use前press.methodOverride（）
    app.use前press.errorHandler（）
    app.use前press.static DIR＃服务dist目录
    app.use app.router
    路线的应用程序，目录＃额外的定制路由
 

如果我们使用HTML5模式，我们的网址的http：//本地主机：3005 /＃/ 1 /富变成的http：//本地主机：一分之三千○五/富（没有更多的哈希＃）。这一次，整个URL由前preSS拦截，它就会犯糊涂，因为我们没有定义比其他 / 路线。

我们真正想说的是URL的后半部分（ / 1 /富）应该被'下放'到角处理。我们怎么能这么说呢？

解决方案

看来，它所有的工作。我没有这样做我自己的工作，但是。我靠这个骨架项目：
https://github.com/thanh-nguyen/angular-ex preSS-种子咖啡

这允许您控制在一定程度上哪些路径是由客户端和服务器进行处理。

I would like to make an AngularJS app with HTML5-style URLs (i.e. with no # fragment in the URL). Thus in the routing controller module of my Angular app I've got something like the following:

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*/);

A number of working examples like AngularFun don't use HTML5 mode. For a request like http://localhost:3005/#/1/foo, it's clear that

• the http://localhost:3005/ part is handled server-side / by Express. Express happily serves our Angular-enabled index.html
• the /1/foo route is handled client-side by Angular's router

Say our server.coffee looks, as standard, something like the below (we serve the static dist directory that contains our compiled, minified Angular sources:

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

If we do use HTML5 mode, our URL http://localhost:3005/#/1/foo becomes http://localhost:3005/1/foo (no more hash #). This time, the entire URL is intercepted by Express, and it gets confused because we don't define routes other than /.

What we would really like to say is that the latter part of the URL (/1/foo) should be 'delegated' to Angular for handling. How can we say this?

解决方案

It appears that it does all work. I didn't do that work myself, however. I relied on this skeleton project: https://github.com/thanh-nguyen/angular-express-seed-coffee

This allows you a certain degree of control over which paths are handled by the client and which by the server.

这篇关于如何拥有与HTML5风格的URL路由角前preSS路由的工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！