Angular.js路由不能在WAMP上工作

我正在设置一个由Express,Node,mySQL堆栈构build的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一切正常,但是当我刷新页面时,我得到一个错误“不能GET / todos”。 经过一番研究后,我发现问题在于,当你刷新服务器时加载/待办事项,并且由于资源不存在,所以错误。 解决scheme似乎是设置mod_rewrite将任何页面redirect到索引,所以angular度可以正确地路由它。

所以我确信mod_rewrite在httpd.conf中是未提交的,并更新了以下部分:

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

然后用app.js在我的根目录下创build一个.htaccess文件。 在我创build的.htaccess文件中添加了下面的代码:

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

然后我重新启动apache,刷新localhost:3000 / todos,并得到相同的“无法GET / todos”消息。 我在这里做错了什么?

我有一些想法是

  1. 我不知道把.htaccess放在什么目录下,所以我只是把它放在根目录下。
  2. 我不知道'/'是发送用户的正确位置,我希望它去索引,但因为我只有一个index.jade文件里面/public/index.jade我想知道如果我需要指出不知何故玉延伸似乎是错误的。
  3. 我写的RewriteRule会把用户带到登陆页面或是他们刷新/书签的正确页面,比如在localhost上刷新:3000 / todos应该把你带到todos页面而不是主页

Personnaly我总是使用虚拟主机,当我需要网址重写。 也许它可以解决你的问题:

I.活动apache模块rewrite_module ,一个解决方案是点击任务栏右边的WAMP图标:

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

II。 打开文件httpd.confwamp -> Apache -> httpd.conf )并取消注释:

 Include conf/extra/httpd-vhosts.conf 

III。 打开文件httpd-vhosts.conf

 wamp -> bin -> apache xyz -> 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

希望它可以帮助。

mod_alias或别名匹配可能会有所帮助。

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

您基本上需要在您的应用程序的有效路径的任何URL上提供您的脚本内容。

我想这会做到这一点:

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

有一点需要注意,如果您的应用程序需要真正将内容提取回给用户(例如您的模板),请确保它们不在路由的别名目录结构下。

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