摆脱＃！在 angularjs ngRoute

Question

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

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

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

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

问题是，如果您使用 html5-模式并按 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-路径

Answer 2

您正在使用 node.js 和 express，对吗？这样就可以 link 所有你的应用程序视图路由到你的 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);
});

摆脱＃！在 angularjs ngRoute

Getting rid of #! in angularjs ngRoute

html

javascript

node.js

angularjs

ngroute

index.html

最后你的路由配置应该是这样的：

摆脱 ＃！在 angularjs ngRoute

Getting rid of #! in angularjs ngRoute

html

javascript

node.js

angularjs

ngroute

index.html

最后你的路由配置应该是这样的：

摆脱＃！在 angularjs ngRoute