Angular.js路由不适用于WAMP

Question

我正在建立一个使用Express，Node，mySQL堆栈构建的Angular.js单页应用程序。 我为路线设置了以下代码：

angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives']).
  config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
     $routeProvider
      .when('/', {
        templateUrl: 'partials/index',
        controller: IndexCtrl
      })
      .when('/addPost', {
        templateUrl: 'partials/addPost',
        controller: AddPostCtrl
      })
      .when('/readPost/:id', {
        templateUrl: 'partials/readPost',
        controller: ReadPostCtrl
      })
      .when('/editPost/:id', {
        templateUrl: '/partials/editPost',
        controller: EditPostCtrl
      })
      .when('/deletePost/:id', {
        templateUrl: 'partials/deletePost',
        controller: DeletePostCtrl
      })
      .when('/todos', {
        templateUrl: 'partials/todos',
        controller: TodosCtrl
     })
     .otherwise({
        redirectTo: '/'
     });

    $locationProvider.html5Mode(true);
  }]);

当我转到应用程序localhost：3000并单击localhost：3000 / todos的链接时，一切正常，但是，当我刷新页面时，出现错误“无法获取/ todos”。 经过研究后，我发现问题在于刷新服务器时尝试加载/ todos，并且由于该资源不存在，因此会出错。 解决方案似乎是设置mod_rewrite将任何页面重定向到索引，以便angular可以正确地路由它。

因此，我确保在httpd.conf中未提交mod_rewrite，并更新了以下部分：

<Directory />
    AllowOverride all
    Order Allow,Deny
    Allow from all
</Directory>

然后使用app.js在我的根目录中创建一个.htaccess文件。 在创建的.htaccess文件中，添加了以下代码：

<IFModule mod_rewrite.c>
    RewriteEngine on
    RewriteRule ^(.*)$ '/'
</IFModule>

然后，我重新启动了Apache，并在localhost：3000 / todos上单击了刷新，并得到了相同的“ Cannot GET / todos”消息。 我在这里做错了什么？

我有一些想法

1. 我不知道将.htaccess放在哪个目录中，所以我只是将其放在根目录中。
2. 我不确定'/'是将用户发送到的正确位置，我希望它转到索引，但是由于我在/public/index.jade中只有index.jade文件，所以我想知道是否需要以某种方式指出这一点，但翡翠扩展似乎是错误的。
3. 我写的RewriteRule会将用户带到登录页面或他们刷新/添加书签的正确页面，即在localhost：3000 / todos上刷新应将您带到todos页面而不是首页

Answer 1

我需要URL重写时，我总是使用虚拟主机。 也许它可以解决您的问题：

I.活动apache模块rewrite_module ，一种解决方案是单击任务栏右侧的WAMP图标：

 wamp -> Apache -> Apache modules -> check rewrite_module

II。 打开文件httpd.conf （ wamp -> Apache -> httpd.conf ）并取消注释：

Include conf/extra/httpd-vhosts.conf

III。 打开文件httpd-vhosts.conf ：

wamp -> bin -> apache x.y.z -> conf -> extra

并添加

<VirtualHost *:80>
    ServerAdmin webmaster@dummy-host.example.com
    DocumentRoot "C:/PATH/TO/MYAPP"
    ServerName myapp.test
    ServerAlias www.myapp.test
    ErrorLog "logs/myapp-error.log"
    CustomLog "logs/myapp-access.log" common
    <Directory "C:/PATH/TO/MYAPP">
        Options Indexes FollowSymLinks
        AllowOverride all
    #   onlineoffline tag - don't remove
        Require local
    </Directory>
</VirtualHost>

IV。 使用管理员权限打开记事本并打开

C:\Windows\System32\drivers\etc\hosts

并添加

127.0.0.1 myapp.test
127.0.0.1 www.myapp.test

尝试您的新网址http://myapp.test/todos

希望它能有所帮助。

Answer 2

mod_alias或aliasmatch可能会有所帮助。

http://httpd.apache.org/docs/2.2/mod/mod_alias.html

基本上，您需要在任何URL上提供脚本内容，该URL对您的应用程序是有效的。

我认为这可以做到：

AliasMatch ^/todos(.*) /
AliasMatch ^/deletePost(.*) /
AliasMatch ^/editPost(.*) /
...

要注意的一件事是，如果您的应用程序需要实际将内容取回给用户（例如您的模板），请确保它们不在为路由别名的目录结构下。

例如，如果您有一个名为“ todos / todos.html”的模板，那么当浏览器尝试获取它时，它将获得“ /”页面的副本。