angularjs.htaccessfriendly-urlpretty-urlsangularjs-ng-route

angularjs ngroute with html5mode(true) on apache fails

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

Solution

  • Once you moved away from using a hash in the url's and added a base tag you also need to make your asset paths absolute for src , href and templateUrl's.

    The browser now sees the angular routes as directory paths and by using relative paths it is looking in the wrong places.