摆脱＃！在 angularjs ngRoute [重复]答案

【问题标题】：Getting rid of #! in angularjs ngRoute [duplicate]摆脱＃！在 angularjs ngRoute [重复]
【发布时间】：2017-11-20 16:45:23
【问题描述】：

我正在使用 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>

【问题讨论】：

在哪里注入 HTML 内容？ red.html 应该被加载到 ng-view 里面有什么问题那么缺少什么？
如果重新加载 red.html 没有在 ng-view 中注入。而是单独显示（只显示red.htm，没有html标签，head标签等）
如果你重新加载这个 URL localhost:8000/red 你配置的路由 .when("/red", ... 应该被加载。 URL 中不应有 .html 之类的后缀。有什么问题？
这并不是您问题的真正答案，但恕我直言，不要使用 ngRoute。请改用 ui-router (github.com/angular-ui/ui-router)。
当您使用html5mode 时，您必须配置服务器以考虑虚拟目录。不要使用与页面路径相同的模板路径，否则服务器无法区分

标签： javascript html angularjs node.js ngroute

【解决方案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);
});

【讨论】：

当客户端路由模板使用相同路径时不起作用
@charlietfl 哦，是的，让我更正一下。
HI lin，很明显，如果我在 chrome 的 URL 中键入 localhost:3000/partials/red.html 并按回车会发生什么...我的答案是 red.html 将单独显示为页面将 red.html 的内容注入 ng-view
@annapoorani 是的，但这可能发生在您的所有公共资源上。这是一个正常的情况，所以并没有什么异常。即使您只允许它通过 AJAX 请求加载，您也不能预先访问公共资源。您的应用程序路由不直接指向您的资源，这样用户就不会以/partials/red.html 结束。你期待什么？
不仅适用于公共资源。但对于重新加载和 F5 案例也是我的确切问题

【解决方案2】：

问题是，如果您使用 html5-mode 并按 F5，您的服务器应该提供的不是您的 red.html，而是您的 index.html。那是因为必须引导 angular 并解析您的 url 以获得正确的位置。

编辑：规则是：

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

奖金：

您应该从定义的位置（如http://localhost:8000/static/）或从另一个域提供静态内容（图像、css、html 模板），以便获得静态文件和 url 路径的明确路径

【讨论】：

我不能承认你的规则 2...如果你直接打电话 localhost:8000/red express 将发送红色（静态文件）索引将如何发送该 get 请求
查看 lin 的回答。