如何从角度路线中完全删除#tag?

时间:2014-08-01 18:03:51

标签: javascript angularjs apache nginx url-rewriting

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

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调用。为什么它没有重定向登录? 如何从角度完全删除#tag?即使我手动点击网址,我也不需要#在有角度的路线中。有没有其他方法可以解决这个问题?

编辑: -

我在后端使用快速框架。 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');

有些人(以下评论)建议在后端处理这条路线。但我没有任何想法。请你建议我怎么做?

2 个答案:

答案 0 :(得分:1)

使用服务器端语言/路由

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

与其他一个回答状态一样,您将必须创建一个catch-all路由,以便任何未在服务器端专门路由的路由将传递给Angular进行路由。如果你让我知道你正在使用的设置,我可以帮忙解决这个问题。

节点/快速路由

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

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

另外,请注意,如果您希望拥有前面所述的API路线,那么如果您希望它们能够正常运行,则应将它们定义为以上全能路线。

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

没有服务器端语言/路由(全角度)

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

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

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

这可让您的应用程序知道文档的根目录是/,并会相应地对其进行路由。因此,您的应用程序将知道/login的位置。进一步阅读:Relative Angular Links

编辑更新Node / Express catch-all路由以将内容路由到Angular

答案 1 :(得分:0)

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