Question

这是我的angularjs路由

app.config(function($routeProvider, $locationProvider) {
  $routeProvider.
    when('/home', {
      templateUrl: 'partials/home.html'
    }).
    otherwise({
      redirectTo: '/'
    });

  if (window.history && window.history.pushState) {
    $locationProvider.html5Mode({
      enabled: true,
      requireBase: false
    });
  }
});

此链接按预期工作

<a href="/home">Home</a>

但是，当我直接在地址栏中输入http://localhost:3000/home时，我会得到一个空白页面。知道为什么会这样吗？

将http://localhost:3000/#/home重定向到http://localhost:3000/home并按预期工作。

Answer 1

html5Mode中的AngularJS使用html5 history routing删除网址中的#。只要您在网页中导航，此功能就可以使用。

浏览器请求index.html一次（设置您的应用，特别是ngRoute），然后点击<a href="/home">Home</a>等不会导致请求服务器。相反，ngRoute查找路线，操纵html5历史记录并显示您点击的内容。

但是，您必须告诉浏览器执行localhost:3000/home请求，有人在网址栏中输入了他实际上想要的index.html（不是home/index.html，这不存在）。这意味着您必须配置服务器以支持html5历史路由。 $location文档有很长的帖子。

以下是您使用express时添加的内容：

// this must be the last middleware added to your express app
app.use(function(req, res) {
  res.sendFile('index.html'); // specify the path to your index.html here
});

Answer 2

如果您直接在地址栏中输入/home，那么当您确实希望AngularJS应用程序位于根目录中的文档时，您需要向服务器询问/home路径中的文档加载/home路由的路径。您需要将服务器配置为将根路径以外的任何请求重定向到根路径，并在#后传递指定的路径，例如，将/home重定向到#/home。< / p>

Answer 3

Angular使用ngRoutes进行导航而不离开页面。如果您的路线包含＃符号后跟路线，那么您仍然在同一页面上。 Angular这样做，以便它可以在视图之间具有持久变量。如果您重定向到/ home而不是＃/ home，则表示您正在加载服务器上/ home文件夹的静态路径，并且当新页面加载时Angular将重新加载，所有变量都将被清除。

URL中的Angularjs ngRoute＃

3 个答案: