Question

我正在使用Angularjs ngRoute for SPA并将Node.js作为我的后端，我的网站上有3页说：

localhost:8000/#!/
localhost:8000/#!/red
localhost:8000/#!/green

通过谷歌搜索，我找到了摆脱/**#!**/的方法，只有当用户无意按F5重新加载页面时才能正常工作。如果重新加载，我的页面结构变得更糟。我的意思是，如果用户在red.html页面中按下F5，则单独显示red.html而不是在 ng-View red.html内容>这就是nodejs获取请求的本质。有没有办法摆脱这个问题？

的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>

Answer 1

您正在node.js使用express，对吗？这样，只需将所有应用程序视图路由链接到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。

最后您的路线配置应如下所示：

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);
});

Answer 2

问题是，如果你使用html5-mode并点击F5，你的服务器应该不是你的red.html，而是你的index.html。那是因为角度必须是自举的，并解析你的网址以获得正确的位置。

编辑：规则是：

如果您致电（或F5或直接导航）http://localhost:8000，那么您必须从服务器获取index.html。
如果您致电（或F5或直接导航）http://localhost:8000/red，那么您也必须从服务器获取index.html。

加成：

您应该从http://localhost:8000/static/或其他域定义的位置传递静态内容（图像，css，html模板），以获得静态文件和网址路径的明确路径

摆脱＃！ in angularjs ngRoute

的index.html

2 个答案:

最后您的路线配置应如下所示：

摆脱 ＃！ in angularjs ngRoute

的index.html

2 个答案:

最后您的路线配置应如下所示：

摆脱＃！ in angularjs ngRoute