I am trying to use ngroute with $locationProvider.html5Mode(true) and a htaccess rewrite, but I can't get it to work.
When I try to access for example http://localhost/angular_blog/article/someTitle I get the following error in my console:
blogApp.js:1 Uncaught SyntaxError: Unexpected token <
blogCtrl.js:1 Uncaught SyntaxError: Unexpected token <
angular.js:38 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.15/$injector/modulerr?p0=blogApp&p1=Error%3…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15%2Fangular.min.js%3A17%3A381)(anonymous function) @ angular.js:38(anonymous function) @ angular.js:4138r @ angular.js:323g @ angular.js:4099ab @ angular.js:4025d @ angular.js:1452uc @ angular.js:1473Jd @ angular.js:1367(anonymous function) @ angular.js:26304a @ angular.js:2762c @ angular.js:3032
I think I've done everything various tuts I've been able to find said, but then it should work, so obviously something is missing. I've included my code below, any help or pointers will be greatly appreciated.
HTML
<!DOCTYPE html>
<html lang="en" data-ng-app="blogApp">
<head>
<meta charset="UTF-8">
<title>Test</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-sanitize.min.js"></script>
<script type="text/javascript" src="./assets/js/blogApp.js"></script>
<script type="text/javascript" src="./assets/js/blogCtrl.js"></script>
<base href="/angular_blog/">
</head>
<body>
<main data-ng-view></main>
</body>
</html>
JS - blogApp.js
var blogApp = angular.module('blogApp', [
'ngRoute',
'ngSanitize',
'blogCtrl'
]);
blogApp.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider.
when('/page', {
templateUrl: './assets/templates/page.html',
controller: 'pageCtrl'
}).
when('/page/:pagePermaLink', {
templateUrl: './assets/templates/page.html',
controller: 'pageCtrl'
}).
when('/article', {
templateUrl: './assets/templates/article.html',
controller: 'articleCtrl'
}).
when('/article/:articlePermaLink', {
templateUrl: './assets/templates/article.html',
controller: 'articleCtrl'
}).
otherwise({
redirectTo: '/page',
});
$locationProvider.html5Mode(true);
}]);
HTACCESS
# BEGIN Pretty URL
<IfModule mod_rewrite.c>
RewriteEngine on
# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
# Rewrite everything else to index.html to allow html5 state links
RewriteRule ^ index.html [L]
</IfModule>
# END Pretty URL