使Angular路线与快速路线一起工作
通过设置Angular路线与Express一起工作，我陷入了僵局。
我试图做这样的Express 4，NodeJS，AngularJS路由，但没有工作。 静态index.html服务每次url更改，但Angular不捕捉部分。
在我的快递中，我有以下代码：
var express = require("express"); var app = express(); app.use(express.static(__dirname + '/app')); app.use("*",function(req,res){ res.sendFile(path.join(__dirname,"app/index.html")); }); app.listen(1337, function(){ console.log("Server is listening on port 1337"); }); 而在我的Angular应用程序中，我有以下几点：
var app = angular.module("myapp",["ngRoute","appControllers"]); app.config(["$routeProvider","$locationProvider",function($routeProvider,$locationProvider){ $locationProvider.html5Mode(true); $routeProvider .when("/list",{ templateUrl: "/partials/users.html", controller: "userListCntr" }) .when("/edit", { templateUrl: "/partials/edit.html", controller: "userEditCntr" }) .when("/register", { templateUrl: "/partials/register.html", controller: "registerCntr" }) .when("/login", { templateUrl: "/partials/login.html", controller: "registerCntr" }); }]);
我的浏览器控制台中没有任何错误。 html检查器显示： <!-- ngView: -->所以该指令是一种初始化。
和依赖列表：
dependencies": { "angular": "1.3.x", "angular-mocks": "1.3.x", "jquery": "1.10.2", "bootstrap": "~3.1.1", "angular-route": "1.3.x", "angular-resource": "1.3.x", "angular-animate": "1.3.x" }
这里是我的文件结构：
--app (angular app) --components --js --css --img --assets --partials --index.html --node-modules --server.js (here express settigs are)
此外，我做了如下的变化来说明所有的静态资源，但仍然不起作用：
app.use(express.static(__dirname+ "/app")); app.use('/js', express.static(__dirname + '/app/js')); app.use('/dist', express.static(__dirname + '/../dist')); app.use('/css', express.static(__dirname + '/app/css')); app.use('/assets', express.static(__dirname + '/app/assets')); app.use('/components', express.static(__dirname + '/app/components')); app.use('/img', express.static(__dirname + '/app/img')); app.use('/partials', express.static(__dirname + '/app/partials')); app.all('/*', function(req, res, next) { // Just send the index.html for other files to support HTML5Mode res.sendFile('/app/index.html', { root: __dirname }); });
请帮忙，因为我找不到解决办法。 谢谢！
当你不通过express.use()的path，那么它默认为/ 。 您为*设置的前进规则是冗余的，甚至可能不起作用。
此外，由于您使用的是html5mode ，因此您需要明确地设置路由资源，Express不会尝试为所有请求提供index.html文件。
尝试从Angular UI-Router的这个例子的大小：
var express = require('express'); var app = express(); app.use('/js', express.static(__dirname + '/js')); app.use('/dist', express.static(__dirname + '/../dist')); app.use('/css', express.static(__dirname + '/css')); app.use('/partials', express.static(__dirname + '/partials')); app.all('/*', function(req, res, next) { // Just send the index.html for other files to support HTML5Mode res.sendFile('index.html', { root: __dirname }); }); app.listen(3006); //the port you want to use
谢谢大家的帮助。 我通过在我的Angular index.html的头部分插入<base href="/" />解决这个问题。 它为我工作，但现在它像魔术和货物编码，因为我不明白为什么它的工作:)在这里find解决scheme： AngularJS：如何启用$ locationProvider.html5Mode深连接
我只是想补充说，添加base href=帮助我。 我有我的应用程序的静态快递和直接浏览我的angular应用程序中的路线会导致很多
拒绝执行脚本，因为它的MIMEtypes（'text / html'）不可执行，严格的MIMEtypes检查被启用
错误被抛出。 但添加base href固定，我现在可以直接浏览我的angular度路线。
虽然使用base href=的@kirgolbuild议的解决scheme可以正常工作，但是还有一种解决scheme可能会引起用户寻找简单的路由服务。 在这个解决scheme中，我们不会使用ExpressJS路由
简单地使用这个
app.use(express.static(__dirname + '/app'));
而不是这个
app.all('/*', function(req, res, next) { // Just send the index.html for other files to support HTML5Mode res.sendFile('index.html', { root: __dirname }); });
这样expressJS会自动提供index.html在这个静态位置，并自动处理路由。 它的行为就像一个简单的http服务器。 当你使用app.all / app.get处理路由的app.get – 你将不得不设置base href来告诉$locationProvider它可以匹配路由的位置