Question

我正在尝试使用HTTPD的mod_rewrite和AngularJS的routeProvider来允许用户访问具有干净URL的网页，该URL将根据URL中的某些参数更改其内容。

例如，假设有JohnSmith和JaneDoe的个人资料页面。我希望他们能够通过URL访问他们的页面，如下所示：

http://my.example.com/JohnSmith

我希望AngularJS代码能够从URL中获取名称“JohnSmith”，并将其用于REST调用：

$http.get('http://my.example.com/profile/name/' + $routeParams.profile)

到目前为止，我已设法让AngularJS获取正确的配置文件，如果URL的格式如下：

http://my.example.com/#/JohnSmith
http://my.example.com/index.html#/JohnSmith

这是迄今为止的相关代码：

的index.html：

    <html ng-app="profile">
    <head>
        <title>Profile</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
        </script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
        <link rel='stylesheet' href='style/style-main.css' type='text/css' />
        <script src="js/app.js"></script>
    </head>
    <body>
        <ng-view></ng-view>
    </body>
</html>

app.js：

(function() {
var app = angular.module('profile', ['ngRoute']);

app.config(function($routeProvider) {
    $routeProvider.when("/:profile",
    {
        templateUrl: "profile.html",
        controller:"ProfileController",
        controllerAs: "profile"
    });

});

app.controller("ProfileController", [ '$http', '$routeParams', function($http, $routeParams) {
    var SELF = this;
    SELF.profile = $routeParams.profile;
    console.log(SELF.profile);
}) ();

使用像这样的干净网址：

http://my.example.com/JohnSmith

...将返回404.

所以我试图使用Apache的mod_rewrite将URL更改为AngularJS可以理解的形式，并从中提取'JohnSmith'参数。

我的Apache节点上有以下RewriteRule：

RewriteRule "(^[^\/#\.]+$)" "#/$1"

我已经检查过了，我知道这个RewriteRule应该触发任何不包含任何额外斜线，井号或句号的URL。因此，它应该重写这样的URL：

http://my.example.com/JohnSmith

到此：

http://my.example.com/#/JohnSmith

这是一个我知道AngularJS可以正确提供内容的表单，所以在Apache将URL重写为该表单后，它应该可以正常工作，对吗？

好了，有了RewriteRule，尝试访问干净的URL不再导致404.事实上，如果我右键单击并选择“查看源代码”，我可以看到我的浏览器肯定试图加载HTML页面。但是，看起来routeProvider不再从URL中获取参数。

如何解决此问题，以便HTTPD RewriteRule和AngularJS routeProvider一起使用干净的URL提供正确的内容？

使用HTTPD的mod_rewrite和AngularJS RouteProvider与参数

0 个答案: