$routeProvider misses all cases on first pass

Question

I am new to angular and am having trouble with my routes. I am creating an angular SPA with .NET MVC and while the views do render I am noticing that I have 2 footers on the page(makes me guess the layout page is being rendered twice, but the body only loads the one time). I also set up some logging to see what is happening and from what I can tell it always misses the "when" cases the first time around but catches them the second time. Below is my config

angular.module("myApp")
    .config(["$routeProvider", function ($routeProvider) {
        $routeProvider
            .when("/", {
                templateUrl: "Home/Home",
                controller: "HomeController",
                message: function () { console.log("hit /") }()
            })
            .when("/login", {
                templateUrl: "Home/Login",
                controller: "LoginFormController",
                message: function () { console.log("hit /login") }()
            })
            .otherwise({
                message:function(){console.log("users think anything else will work")}(),
                redirectTo:"/"
            });
    }]);

This is my console output when I hit http://localhost:54865/

hit /
hit /login
users think anything else will work
jquery-1.10.2.js:8686 Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
VM1423:30269 WARNING: Tried to load angular more than once.

Any help getting in the right direction on how to fix this would be appreciated

Edit

I am using default MVC routing, I have a 'Home' controller with methods and views for 'Index', 'Home', and 'Login'. Index view only has

 <div ng-view></div>

The 'Home' View has the default content provided by visual studio when creating a webapp using MVC (jumbotron, getting started, etc) and the login screen is my login screen.

this is the body of my layout file

<body ng-app="myApp">

<div class="container body-content">
    @RenderBody()
    <hr />
    <footer>
        <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
    </footer>
</div>

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/angular")
@RenderSection("scripts", required: false)
</body>

Where is angluar.js being reference in you project? Might want to make sure you take care of that as well. — KreepN, Mar 10 '16 at 18:01
According to your console output the angular router is matching (`hit /`,`hit /login`, etc). Then, you see the angular config loading again `WARNING: Tried to load angular more than once.` It looks like [MVC routing is getting in the way](http://stackoverflow.com/questions/23682203/how-to-use-asp-net-mvc-and-angularjs-routing). What does your MVC routing config look like? — Jasen, Mar 10 '16 at 18:02
@Jasen I have the default MapRoute as well as attribute routing for the MVC and WEB API routing — aemorales1, Mar 10 '16 at 18:06
looking at the generated source I found it is rendering the layout file twice, once as expected and then again with ng-view. I believe this may be because MVC renders the layout with the body whenever the path to a controller is hit thus the duplication — aemorales1, Mar 10 '16 at 18:38

score 0 · Accepted Answer · answered Mar 10 '16 at 18:48

Ok so it looks like I confused myself with the logging. Turns out it's not hitting all of them. The issue was that the layout page was rendered twice. My index page would load it once and then within @RenderBody I had my ng-view which would then serve the entire view including a new copy of the Layout file. I was able to get rid of this by returning a partial view on my Home controller.

$routeProvider misses all cases on first pass

Edit

1 Answers1