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”的模板，那么當瀏覽器嘗試獲取它時，它將獲得“ /”頁面的副本。