javascript - 摆脱＃!在 angularjs 中

标签 javascript html angularjs node.js ngroute

<分区>

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

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

通过谷歌搜索，我找到了摆脱 /**#!**/ 的方法，只有当用户无意按 F5 重新加载页面时，它才能正常工作。如果重新加载，我的页面结构会变得更糟。我的意思是，如果用户在 red.html 页面中按 F5，则单独显示 red.html 而不是注入(inject) red.html ng-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>

最佳答案

你正在使用 node.js 和 express，对吧？这样只需将所有应用程序 View 路由链接到 index.html 并将部分 View 放在其他子目录中以避免路由冲突:

//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 将能够以正确的方式注入(inject) View ，而你的 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);
});

关于javascript - 摆脱＃!在 angularjs 中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44614101/

上一篇：node.js - 在 NodeJs 中按照 RFC 1738 编码字符串

下一篇：javascript - TypeError : <class> is not a constructor, 但不同的类工作正常

相关文章：

angularjs - $ interval函数在我更改路线时继续

javascript - 如何将文本字符串拆分为多个部分？

javascript - 检测触摸事件与点击事件的更好方法

html - 自动调整 div 边框大小

html - 垂直居中的嵌套 DIV

html - Twitter Bootstrap 3 - 在超小型设备上交换列

angularjs - 如何正确使用angularjs的routeParams

angularjs - angular.element($window).scrollTop() 使用 webpack 抛出 "is not a function"

javascript - 当您开始向下滚动时，顶部标题图像在摇晃/抽动，为什么？

javascript - 为什么箭头函数在尝试获取 onclick 事件时不能在 javaScript 中工作