摆脱 #! 在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