摆脱 ＃！ 在angularjs ngRoute
我正在使用Angularjs ngRoute作为我的后端的Node.js，我的网站上有3个页面：
localhost:8000/#!/-
localhost:8000/#!/red -
localhost:8000/#!/green
通过谷歌search，我find了摆脱/**#!**/ ，只有当用户无意按F5重新加载页面时，它才能正常工作。 如果重新加载，我的页面结构变得更糟。 我的意思是，如果用户在他/她在red.html页面时按下了F5，则单独显示red.html ，而不是在ng-View中注入red.html内容即red.html的性质获取请求。 有什么办法摆脱这个问题？
的index.html
<body ng-app="myApp"> <p><a href="/">Main</a></p> <a href="/red">Red</a> <a href="/green">Green</a> <ng-view></ng-view> <script> var app = angular.module("myApp", ["ngRoute"]); app.config(function($routeProvider, $locationProvider) { $routeProvider .when("/", { templateUrl: "/main" }) .when("/red", { templateUrl: "/red" }) .when("/green", { templateUrl: "/green" }) $locationProvider.html5Mode(true); }); </script> </body>
你用express来使用node.js ，对吗？ 通过这种方式，只需将所有应用程序视图path链接到index.html ，并将您的部分视图放在其他子目录中以避免路由冲突：
//resources app.use("/js", express.static(__dirname + "/js")); app.use("/img", express.static(__dirname + "/img")); app.use("/css", express.static(__dirname + "/css")); //different path for your partials to avoid route conflicts app.use("/partials", express.static(__dirname + "/partials")); //view routes app.get('/*', function(req, res){ res.sendFile(__dirname + '/index.html'); });
那样你所有的路线：
-
localhost:8000/ -
localhost:8000/red -
localhost:8000/green
将指向您的index.html 。 因此，您的$routeProvider将能够以正确的方式注入视图，而您的index.html将被加载每次。
最后你的路由configuration应该是这样的：
var app = angular.module("myApp", ["ngRoute"]); app.config(function($routeProvider, $locationProvider) { $routeProvider .when("/", { templateUrl: "/partials/main.html" }) .when("/red", { templateUrl: "/partials/red.html" }) .when("/green", { templateUrl: "/partials/green.html" }) $locationProvider.html5Mode(true); });
问题是，如果您使用html5模式并按F5，您的服务器不应该为您的red.html服务，而是服务您的index.html。 这是因为angular度必须引导，并parsing你的url，以获得正确的位置。
编辑：规则是：
- 如果你调用（或F5或直接导航）
http://localhost:8000，那么你必须从服务器获得index.html。 - 如果您打电话（或F5或直接导航）
http://localhost:8000/red，那么您也必须从服务器获取index.html。
奖金：
您应该从定义的位置（如http://localhost:8000/static/或从另一个域传递静态内容（图像，CSS，HTML模板），以便使静态文件和URLpath具有明确的path