Angular.js routes not working on WAMP

Question

I am working on setting up an Angular.js single page application built with an Express, Node, mySQL stack. I have set up the following code for the routes:

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);
  }]);

When I go to my application localhost:3000 and then click on a link for localhost:3000/todos everything works, however when I refresh the page I get an error "Cannot GET /todos". After some research I have found that the problem is that when you refresh the server trys to load /todos and since the resource doesn't exist it errors. The solution seems to be to set up mod_rewrite to redirect any page to the index so angular can route it correctly.

So I made sure that mod_rewrite is uncommitted in the httpd.conf, and updated the following section:

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

Then created a .htaccess file inside my root directory with app.js. Inside the .htaccess file I created I added the following code:

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

Then I restarted apache and hit refresh on localhost:3000/todos and got the same "Cannot GET /todos" message. What am I doing wrong here?

Some thoughts I have are

1. I don't know what directory to put .htaccess in, so I just put it in the root.
2. I'm not sure '/' is the correct place to send the user to, I want it to go to the index but since I only have an index.jade file inside /public/index.jade I'm wondering if I need to point to that somehow but the jade extension seems wrong.
3. Is the RewriteRule I wrote going to take the user to the landing page or the correct page they refreshed/bookmarked, i.e. refreshing on localhost:3000/todos should take you to the todos page not the homepage

Answer 1

Personnaly i always use a vhost when i need url rewriting. Maybe it could solve your problem:

I. Active apache module rewrite_module, one solution is to click on the WAMP icon in the right of your task bar:

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

II. Open the file httpd.conf (wamp -> Apache -> httpd.conf) and uncomment the line :

Include conf/extra/httpd-vhosts.conf

III. Open the file httpd-vhosts.conf:

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

and add

<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. Open Notepad with admin rights and open

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

and add

127.0.0.1 myapp.test
127.0.0.1 www.myapp.test

try your new url http://myapp.test/todos

Hope it could help.

Answer 2

mod_alias or aliasmatch might be helpful.

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

You basically need to serve your script contents at any URL that is a valid route for your application.

I think this would do it:

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

One thing to be careful of, if your application needs to actually fetch content back to the user (such as your templates) make sure they are not under the same directory structure that's being aliased for your routes.

For example, if you had a template called "todos/todos.html", when the browser tried to fetch it, it would instead get a copy of your "/" page.