ExpressJS与AngularJS路由配对，没有链接上的hashtag
我试图在我的ExpressJS服务器上实现路由function。
http://localhost:3000/app/sub_one http://localhost:3000/app/sub_two 不幸的是，我能够在应用程序名称和模块之间使用#作为前缀。 我一直在寻找解决scheme，似乎这个代码会做我的angular度configuration – $locationProvider.html5Mode(true); 。
但是，执行和调整链接，访问以下链接返回一个不寻常的行为。
http://localhost:3000/app/sub_one => Cannot GET /app/sub_one http://localhost:3000/app/sub_two => Cannot GET /app/sub_two
我可能有这样的直觉，问题是我的server.js路由。
var port = 3000; var express = require("express"); var morgan = require("morgan"); var server = express(); server.use(morgan("tiny")); server.use("/app", express.static(__dirname + "/app")); server.use("/bower_components", express.static(__dirname + "/bower_components")); server.listen(port, function() { console.log("Node server initialized. Server's port: " + port); });
我已经在Bitbucket上放置了这个问题的存储库
我可能是错误的，但似乎你可能会混淆客户端路由与服务器端路由。
通过ngRouter定义的路由不应该命中服务器。
我修改了你的代码，使其工作。 应该足以让你自己去 – 如果你有任何问题，给我一个呼喊。
分叉回购与下面的变化。
更改后的文件：
config.js
var angular = angular.module("NodeAngularJSRouting", ["ngRoute"]); angular.config(function($routeProvider, $locationProvider) { $routeProvider .when("/app/sub_one", { templateUrl: "/view/sub_view_one/list.html", controller: "SubViewOneCtrl" }) .when("/app/sub_two", { templateUrl: "/view/sub_view_two/list.html" }) .otherwise({ templateUrl: "/view/default/default.html", controller: "DefaultCtrl" }); $locationProvider.html5Mode(true); });
server.js
var port = 3000; var express = require("express"); var morgan = require("morgan"); var server = express(); server.use(morgan("tiny")); // serve bower components statically server.use("/bower_components", express.static(__dirname + "/bower_components")); // for all routes defined on client side send // entry point to the app // btw. changes of those routes on client side // are not supposed to hit server at all (!) server.use("/app*", function(req, res, next){ res.sendFile(__dirname + '/app/main.html'); }); // for all public requests try to use /app folder server.use("/", express.static(__dirname + "/app")); server.listen(port, function() { console.log("Node server initialized. Server's port: " + port); });
的index.html
重命名为main.html
<!DOCTYPE html> <html ng-app="NodeAngularJSRouting" > <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1"> <title>Node AngularJS Routing</title> <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css"> <link rel="stylesheet" href="/view/css/styles.css"> </head> <body> <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <a class="navbar-brand" href="/app">Node AngularJS Route</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="/app/sub_one">View One</a></li> <li><a href="/app/sub_two">View Two</a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <div class="container" ng-view></div> <script src="/bower_components/jquery/dist/jquery.js"></script> <script src="/bower_components/bootstrap/dist/js/bootstrap.js"></script> <script src="/bower_components/angular/angular.js"></script> <script src="/bower_components/angular-route/angular-route.js"></script> <script src="/config/config.js"></script> <script src="/controller/default-default.js"></script> <script src="/controller/sub-one_list.js"></script> </body> </html>