javascript - 如何从 Angular route 完全删除#标签?

标签 javascript angularjs apache nginx url-rewriting

我正在使用 $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 中删除#sign)但是当我手动输入或点击 localhost:3000/login 时,它不会重定向到登录页。因为它使用它进行 api 调用。为什么它不重定向到登录? 我怎样才能从 Angular 中完全删除#标签?即使我手动点击 url,我也不需要在 Angular 路径中使用#。有没有其他方法可以解决这个问题?

编辑:-

我在后端使用 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');

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

最佳答案

使用服务器端语言/路由

您是否使用任何服务器端语言/框架来路由您的应用程序(如 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 catch-all 路由以将事物路由到 Angular

关于javascript - 如何从 Angular route 完全删除#标签?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25086082/

相关文章:

javascript - 使用 Javascript 更改颜色 (onclick)

javascript - EmberJS 模板组件突然不在页面上呈现

c# - Protractor 可以测试不基于 Angular 的登录吗

javascript - 403 Forbidden on site resources (js,png,css) 但权限可以吗?

javascript - 鼠标离开时保持子菜单打开

javascript - 强制 Javascript 函数调用等到上一个完成 mvc 4

javascript - 等待工厂加载后再解决

angularjs - Angular .then() 无法识别

python - 导入错误: oracle client library with python wsgi

apache - 如何使 ProxyPassReverse 重写相对重定向?