Routes not working in AngularJS

Question

I'm new to Angular and can't get my routing to work in my application. I have nested modules which leads me to think that the problem is in the injections but I was hoping someone could save me from my day of frustration.

The module definitions are as follows:

application.js

 'use strict';
    var mainApplicationModuleName = 'vre';
    var mainApplicationModule = angular.module(mainApplicationModuleName,     ['ngResource', 'ngRoute', 'main']);
    mainApplicationModule.config(['$locationProvider',
            function($locationProvider){
                $locationProvider.hashPrefix('!');
            }
    ]);
    if(window.location.hash === '#_=_'){
        window.location.hash = '#!';
    }
    angular.element(document).ready(function(){
         angular.bootstrap(document, [mainApplicationModuleName]);
    });

main module

angular.module('main', ['administrator']);

administrator profile

 'use strict';
    angular.module('administrator', ['accountManagement']);

account management module

 'use strict';
    angular.module('accountManagement', ['ngRoute']);

The routing is then as follows:

angular.module('accountManagement').config(['$routeProvider',     function($routeProvider){
    alert("hello");
    $routeProvider
    .when('/accounts/:accountId', {
        templateUrl:  'administrator/account_management/views/view_account.client.view.html'
    });
}]);

I'm getting the alert pop up but when I go to the url, all i'm getting is: Cannot GET /accounts/55889e12c02081fc20de1bdd

Any help is much appreciated,

Ash

Answer 1

I think the url must be http://localhost/#/accounts/55889e12c02081fc20de1bdd

Don't forget the #