关键词：
【中文标题】请求新页面时如何将 AngularJS 路由与 Express (Node.js) 一起使用？【英文标题】：How to use AngularJS routes with Express (Node.js) when a new page is requested? 【发布时间】：2012-10-24 16:58:13 【问题描述】：我正在使用 Express，它从静态目录加载 AngularJS。通常，我会请求 http://localhost/，其中 Express 为我提供我的 index.html 和所有正确的 Angular 文件等。在我的 Angular 应用程序中，我设置了这些路由，它们替换了 ng-view 中的内容：
$routeProvider.when('/',
templateUrl: '/partials/main.html',
controller: MainCtrl,
);
$routeProvider.when('/project/:projectId',
templateUrl: '/partials/project.html',
controller: ProjectCtrl,
);
$locationProvider.html5Mode(true);
在我的主页上，我有一个指向<a href="/project/project.id"> 的链接，它将成功加载模板并将我定向到http://localhost/project/3 或我指定的任何ID。问题是当我尝试将浏览器定向到 http://localhost/project/3 或刷新页面时，请求将发送到 Express/Node 服务器，该服务器返回 Cannot GET /project/3。
如何设置我的 Express 路线以适应这种情况？我猜这将需要在 Angular 中使用 $location （尽管我更愿意避免他们使用的丑陋的 ?searches 和 #hashes），但我对如何设置 Express 路线一无所知处理这个。
谢谢。
【问题讨论】：
你能展示一下你目前的快车路线是什么样的吗？ 目前，我没有，因为 Express 从静态目录提供服务。app.use(express.static(path.join(__dirname, 'public')));
【参考方案1】：
使用 express 4，您可能希望捕获所有请求并重定向到 angularjs index.html 页面。
app.use(app.router); 不再存在并且res.sendfile 已弃用，请使用res.sendFile 和大写F。
app.post('/projects/', projectController.createProject);
app.get('/projects/:id', projectController.getProject);
app.get('*', function (req, res)
res.sendFile('/public/index.html');
);
将所有 API 路由放在每个路径的路由之前 app.get('*', function (req, res)...)
【讨论】：
这需要一些支持。感谢大写F更正expressjs.com/4x/api.html#res.sendFile【参考方案2】：我会创建一个包罗万象的处理程序，在发送必要数据的常规路由之后运行。
app = express();
// your normal configuration like `app.use(express.bodyParser());` here
// ...
app.use(app.router);
app.use(function(req, res)
// Use res.sendfile, as it streams instead of reading the file into memory.
res.sendfile(__dirname + '/public/index.html');
);
app.router 是运行所有 Express 路由的中间件（例如 app.get 和 app.post）；通常，Express 会自动将其放在中间件链的最后，但您也可以像我们在此处所做的那样将其显式添加到链中。
然后，如果 URL 不是由 app.router 处理，最后一个中间件会将 Angular HTML 视图向下发送到客户端。这将发生在 任何 未被其他中间件处理的 URL 上，因此您的 Angular 应用必须正确处理无效路由。
【讨论】：
需要注意的是，在Express 4中不推荐使用app.router，会抛出错误。 所以按照@ShawnSolomon 的建议，只需排除app.use(app.router); 行。【参考方案3】：
我想我应该澄清一下我对使用模板引擎不感兴趣，但是让 Angular 自己提取所有 HTML 部分，Node 在这里完全作为静态服务器运行（但它不会用于 JSON API。Brian Ford 在这里展示了如何使用 Jade：http://briantford.com/blog/angular-express.html
我的应用是一个单页应用，所以我为每个可能的 URL 模式创建了一个 Express 路由，并且它们每个都做同样的事情。
fs.readFile(__dirname + '/public/index.html', 'utf8', function(err, content)
res.send(content);
);
我假设我必须将一些请求变量传递给 Angular，但看起来 Angular 会自动处理它。
【讨论】：
有同样的初始问题：如何从节点服务器提供特定的角度视图。但我不明白解决方案。您能否详细介绍一下您如何使路线localhost/project/3 服务于正确的视图？谢谢！转发与重定向
...个内部的方法来调用目标页面，新的页面继续处理同一个请求，而浏览器将不会知道这个过程。与之相反，重定向方式的含义是第一个页面通知浏览器发送一个新的页面请求。因为，当你使用重定向时，浏览器中所显示的URL会变... 查看详情
如何将 eventHandlers 和 uploadEvntHandlers 与 angularjs 1 http 请求一起使用？
】如何将eventHandlers和uploadEvntHandlers与angularjs1http请求一起使用？【英文标题】：HowtouseeventHandlersanduploadEvntHandlerswithangularjs1httprequests?【发布时间】：2016-10-2811:37:43【问题描述】：我试过这段代码没有成功$http(method:"GET",url:"data/myco... 查看详情
Python 将 Ajax 请求与正常页面视图分开
】Python将Ajax请求与正常页面视图分开【英文标题】：PythonseparatingAjaxrequestsfromnormalpageviews【发布时间】：2011-05-1120:16:51【问题描述】：我想知道您在处理这个问题时想出了哪些策略。我是python/django框架的新手，想将视图服务与aj... 查看详情
angularjs - 路由时如何保留当前视图数据
】angularjs-路由时如何保留当前视图数据【英文标题】：angularjs-howtokeepcurrentviewdatawhenrouting【发布时间】：2015-01-1707:39:26【问题描述】：我对angularjs有疑问。2有2个视图：视图1具有这些控件名为txtBox1的文本框，默认值为空一个名... 查看详情
java重定向时如何保持地址栏不变
...个内部的方法来调用目标页面，新的页面继续处理同一个请求，而浏览器将不会知道这个过程。与之相反，重定向方式的含义是第一个页面通知浏览器发送一个新的页面请求。因为，当你使用重定向时，浏览器中所显示的URL会变... 查看详情
如何将 Angular js 路由与 laravel/lumen 路由一起使用？
】如何将Angularjs路由与laravel/lumen路由一起使用？【英文标题】：Howtouseangularjsroutingwithlaravel/lumenrouting?【发布时间】：2016-05-2603:15:39【问题描述】：我正在开发在laravel（最新版本5.*）上开发的web应用程序。我做了很多搜索，... 查看详情
每当新请求到来时，如何更改元素的高度
】每当新请求到来时，如何更改元素的高度【英文标题】：HowcanIchangetheheightofanelementwheneverthenewrequestcomes【发布时间】：2020-10-1013:32:35【问题描述】：我有一个固定定位的导航栏和页脚，它们的高度取决于窗口大小，因此我为每... 查看详情
在不使用路由器的情况下单击 React.js 中的按钮时如何打开新页面？
...不使用路由器的情况下单击React.js中的按钮时如何打开新页面？【英文标题】：HowtoopenupanewpagewhenclickedonabuttoninReact.jswithoutusingRouters?【发布时间】：2021-03-0310:19:41【问题描述】：我对React很陌生（React钩子等）。我的任务是在单击... 查看详情
如何将python文件与html文件链接
...：我已经开始了一个新的django项目。我已经在django的管理页面中链接了HTML文件。当我在管理页面中单击查看站点时，html文件已打开。在这个html文件中有一个注册按钮。当我单击它时，将打开html表单以填写详细信息以注册注册... 查看详情
如何提供到 angularJs 路由页面的特定链接
】如何提供到angularJs路由页面的特定链接【英文标题】：HowtoprovideaspecificlinktoangularJsroutedpage【发布时间】：2015-10-3017:34:24【问题描述】：我有一个angularJs应用程序，它使用$routeProvider来处理内部路由。后端在SpringBoot应用程序中... 查看详情
Vue路由器进出页面转换：在旧路由保持可见时转换新路由
】Vue路由器进出页面转换：在旧路由保持可见时转换新路由【英文标题】：Vuerouterin-outpagetransition:transitioninanewroutewhileoldrouteremainsvisible【发布时间】：2020-02-0506:33:21【问题描述】：为了说明我想要实现的目标，同时也分别讨论和... 查看详情
vue路由跳转取消上个页面的异步请求
...差的情况下,会一直pending,切换路由后在network中添加新的请求但是正在pending的请求依然存在.当我们在项目中做了一个上拉加载分页的时候会一直加载中,用户等待不耐烦后可能会主动触发返回操作,但是此刻即使用户触发返回操作,... 查看详情
Angularjs + Typescript，如何将 $routeParams 与 IRouteParamsService 一起使用
】Angularjs+Typescript，如何将$routeParams与IRouteParamsService一起使用【英文标题】：Angularjs+Typescript,Howtouse$routeParamswithIRouteParamsService【发布时间】：2014-08-1012:57:42【问题描述】：我正在使用$routeParams从URI中提取属性并将本地变量设置... 查看详情
如何使 AngularJS 路由与 index.html/#/myPage 一起使用，如 index.html#/myPage
】如何使AngularJS路由与index.html/#/myPage一起使用，如index.html#/myPage【英文标题】：HowtomakeAngularJSrouteworkswithindex.html/#/myPagelikeindex.html#/myPage【发布时间】：2015-04-0901:30:45【问题描述】：我当前的iFrame页面加载了index.html#/myPage，它在C... 查看详情
Angularjs路由与django的网址
】Angularjs路由与django的网址【英文标题】：Angularjsroutingwithdjango\'surls【发布时间】：2013-09-2413:46:27【问题描述】：我的前端使用AngularJS，后端使用Django。我在后端做着非常简单的事情，所以我没有考虑过使用sweetpie。我遇到的问... 查看详情
如何将特定的 ListTile 变量传递给新的页面路由 onTap？
】如何将特定的ListTile变量传递给新的页面路由onTap？【英文标题】：HowtopassspecificListTilevariablestonewpagerouteonTap?【发布时间】：2019-06-3009:56:54【问题描述】：我的代码构建了一个ListTiles的ListView，每个ListTile从云Firestore数据库中获... 查看详情
如何在 Rails 4 中为 AngularJS 更正设置根路由？
】如何在Rails4中为AngularJS更正设置根路由？【英文标题】：HowtocorrectsetrootrouteinRails4forAngularJS?【发布时间】：2014-04-1902:17:59【问题描述】：我在将Rails路由与AngularJS集成时遇到了麻烦。当我在浏览器输入中转到“localhost:3000”时... 查看详情
如何使用 vue 路由器将道具传递到 nuxt 错误页面？
...述】：我有一个nuxts-s-r应用程序，我正在使用axios发出HTTP请求。当我使用axios从我的服务器收到错误时，我想将带有vue路由器的错误消息作为道具传递给我的错误页面，我已将其设置为nuxt详细信息here。我目前在 查看详情