AngularJS html5Mode routing issue

[haibogu]

Hi all,

I'm experimenting building a content site based on AngularJS and Processwire.

I‘ve turned on the html5Mode in angularjs, everything works so far re agularjs routing, but when I try to refresh a page, only loads a page without header (thus no js/style). This to me seems a classic problem with server setup ( http://stackoverflow.com/questions/16569841/reloading-the-page-gives-wrong-get-request-with-angularjs-html5-mode/16570533#16570533 ), which requires htaccess setup (I'm on Apache server).

But not quite sure how to set up the htaccess? Attached is my htaccess, with below are some routing settings of angular:

scotchApp.config(function($routeProvider,$locationProvider) {
    $routeProvider
        .when('/news', {
            templateUrl : 'news',
            controller  : 'mainController'
        })
        .when('/about', {
            templateUrl : 'about',
            controller  : 'aboutController'
        })
        .otherwise({
            templateUrl : 'news',
            controller  : 'mainController'
        });
    $locationProvider.html5Mode(true);
});

 

THANKS advance for all your help!

htaccess.txt

Edited July 28, 2016 by haibogu
minor typo & formatting...