如何从角度路线中完全删除#标签？答案

【问题标题】：how to completly remove # tag from angular route?如何从角度路线中完全删除#标签？
【发布时间】：2014-09-25 00:03:46
【问题描述】：

我正在使用$locationProvider.html5Mode(true) 在地址栏中隐藏# 标签。

angular.module('witnessApp',['ngRoute','witnessApp.Service','witnessApp.Controller','ui.bootstrap','ngAnimate','ngTouch','growlNotifications', 'ngSanitize'])
  .config(function ($routeProvider,$provide,$locationProvider) {
  var loginReq;
    $routeProvider
     .when('/login', {
        templateUrl: 'views/login.html',
        controller:'LoginCtrl',
        access: { "requiredLogin": false }
      })
     .otherwise({
        redirectTo: '/login'
      })
     $locationProvider.html5Mode(true);
  })

当应用程序启动时，它重定向到（登录页面）localhost:3000/login（它从 localhost:3000/#/login 中删除 # 符号）但是当我手动输入或点击 localhost:3000/login 时它不会重定向到登录页。因为它使用这个来调用api。为什么它不重定向到登录？我怎样才能从角度完全删除#标签？即使我手动点击 url，我也不需要 # in angular route。有没有其他方法可以解决这个问题？

已编辑：-

我在后端使用 express 框架。 server.js 的代码：

var express = require('express'),
    app = module.exports = express();

app.engine('.html', require('ejs').__express);

app.set('views', __dirname + "/views");

app.set('view engine', 'html');

app.use(express.static(__dirname + "/public"));

app.get('/', function(req, res) {
    res.render('index');
});


app.listen(process.env.PORT || 3000);
console.log('[Application] on port 3000');

有些人（在下面评论）建议在后端处理这条路线。但我不知道。你能建议我怎么做吗？

【问题讨论】：

如果/login 将转到您的api，您可能需要将您的api 移动到另一个路径，例如/api/*，以便您可以将所有不是/api/* 的内容重写为@987654327 @
您需要服务器端配置，将路由责任移交给客户端。所以服务器应该总是默认路由到/或加载 index.html 并且从那里只有客户端应该处理路由
您使用的是哪个网络服务器？ nginx的？阿帕奇？
我正在使用 Apache 服务器

标签： javascript angularjs apache nginx url-rewriting

【解决方案1】：

您需要编辑您的网络服务器的配置，以便它将任何未知的 URL 重定向到 index.html 或您的主要 AngularJS HTML 文件。

【讨论】：

【解决方案2】：

使用服务器端语言/路由

您是否使用任何服务器端语言/框架来路由您的应用程序（如 PHP/Laravel 或 Node/Express）？

与其他答案状态之一一样，您必须创建一个包罗万象的路由，以便任何未专门在服务器端路由的路由都将传递给 Angular 进行路由。如果您让我知道您使用的设置，我可以帮助您解决包罗万象的路线。

节点/快速路由

使用 Node 和 Express 时，您必须定义 catch-all 路由。目前您的主页有/ 路由，但您的服务器不知道如何处理/login。使用路由 * 将所有未指定的请求路由到该索引文件和您的 Angular 应用程序。这是您需要的路线：

app.get('*', function(req, res) {
    res.render('index');
});

另外，请注意，如果您想要像前面所说的那样拥有 API 路由，如果您希望它们起作用，则应该将它们定义为在包罗万象的路由之上。

Here 是一些可供参考的MEAN 教程。 完全披露：这些文章是我写的。

没有服务器端语言/路由（所有 Angular）

如果您没有使用任何服务器端语言并且只是从头开始加载 Angular 应用程序，可以尝试将 <base href="/"> 添加到文档的头部，如下所示：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">

    <base href="/">
</head>

这让您的应用程序知道您的文档的根是/，并将相应地路由它。因此，您的应用程序将知道/login 的位置。延伸阅读：Relative Angular Links

编辑：更新 Node/Express 包罗万象的路由以将事物路由到 Angular

【讨论】：

我在服务器端使用 express 框架。你能指导我解决这个问题吗？我在我的问题中添加了 server.js 代码。
我已更新答案以添加您需要的路线。只需快速更改路线，您就可以开始了！