My ng-view DIV Disappears - Angular JS 1.x

Question

I'm working on an angularJS and ASP.NET project in Visual Studio 2013. I am not having any luck solving this issue where my DIV node for my ng-view is being removed and replaced with an ng-view comment. No errors are being generated while running on localhost. I am using pretty URLs instead of the pound sign delimiter.

Instead of this... <div ng-view></div>

I get this... <!-- ng-view: -->

I read through several posts on StackOverflow, but each of them present the absemce of angular-route.js from the SPA page being the primary cause. I have minified versions of angular.js and angular-route.js included along with my controller code; in that order. I've verified the path to the scripts and the template assets. I made sure the ngRoute dependency is included in my module/controller. I made sure the MVC routing is referencing the right paths... I'm not sure what else to check. Any insight would be greatly appreciated.

Answer 1

This indicates that something is awry with the routes. By starting with a working example with the following app.js config

angular
    .module('app', ['ngRoute', 'ngCookies'])
    .config(config)
    .run(run);

config.$inject = ['$routeProvider', '$locationProvider'];
function config($routeProvider, $locationProvider) {
    $routeProvider
        ...
        .when('/login', {
            controller: 'LoginController',
            templateUrl: 'login/login.view.html',
            controllerAs: 'vm'
        })
        ...
        .otherwise({ redirectTo: '/login' });
}

The behavior you observe can be reproduced by doing any of the following:

• Removing the leading slash '/' in the route ('/login')
• Not calling .config on the module
• Omitting the templateUrl for route ('/login')

There are other potential causes, but hopefully you can find what is wrong by comparing to the working example.