Angular Routing isn't being intercepted

Question

I have the following in my app.js file:

// Declare app level module which depends on filters, and services


  var APP = angular.module('DiagsDashboard', ['ngRoute', 'DiagsDashboard.filters', 
'DiagsDashboard.services', 'DiagsDashboard.directives', 'DiagsDashboard.controllers']);

APP.config(function ($routeProvider, $locationProvider) {

    $locationProvider.html5Mode(true);
    $locationProvider.hashPrefix('!');

    $routeProvider
        .when('/', { templateUrl: '/views/shared/Error.html' })
        .when('/Error', { templateUrl: '/views/shared/Error.html' })
        .when('/Diagsdashboard', { templateUrl: '/views/shared/Error.html' })
        .when('/Diagsdashboard/Error', { templateUrl: '/views/shared/Error.html' })
        .otherwise({ templateUrl: '/views/shared/Error.html' });
});

But when I browse to:

- /localhost/#
- /localhost/#/DiagsDashboard/
- /localhost/#/DiagsDashboard/Error
- /localhost/#/error

The whole page re-loads and everything refreshes. I've copied this code from a project where it works and I have angular-route.js included.

This is an MVC application located within IIS as a sub-application at /localhost/DiagsDashboard.

Answer 1

The issue was simply I hadn't give ng-app a name in the markup. I'd read that it is possible to use ng-app without a name but obviously that isn't the case.