Adding $locationProvider to config causing error - angularjs

Question

Im just learning angular, When i add $locationProvider to my .config, im getting the following error. Removing any reference to $locationProvider removes the error. Is this some angular version error, i have tried different (higher) versions? Im not sure how to add the $locationProvider in without getting the error. Any help would be appreciated.
Ive set up in index.html
Error: Error: [$injector:modulerr] http://errors.angularjs.org/1.2.9/$injector/modulerr?p0=styleApp&p1=%5B%24injector%3Anomod%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.2.9%2F%24injector%2Fnomod%3Fp0%3DstyleApp%0AF%2F%3C%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.9%2Fangular.min.js%3A6%3A449%0AVc%2Fb.
My config looks like:
styleApp.config(function($routeProvider, $locationProvider) {
$routeProvider
// route for the home page
.when('#/', {
templateUrl : '/page/page1.html',
controller : 'mainCtrl'
})
// route for 2nd page
.when('#page2', {
templateUrl : '/subdir/page2.html',
})
// route for the 3rdpage
.when('#page3', {
templateUrl : '/subdir/page3.html',
})
.when('#page4', {
templateUrl : '/subdir/page4.html',
})
.when('#page5', {
templateUrl : '/subdirn/page5.html',
});
// use the HTML5 History API
$locationProvider.html5Mode(true);
});

Answer 1

You should add 'ngRoute', as a dependency to your module like this:
var styleApp = anular.module('moduleName', ['ngRoute']);
Secondly, html5Mode makes your URLs look like normal URLs, so you should remove the # from all the routes; consequently, the route for page 4 will look like this:
.when('/page4', {
templateUrl : '/subdir/page4.html',
})