404 Error with Angularjs TemplateUrl Routing

Question

I am following this tutorial, trying to have a SPA inside my MVC3 application where the SPA is called by a controller, DemoController.cs.

I am getting 404 errors when the app tries to load the different Templates, (about.html, contact.html, and home.html) via a nav bar.

This is my directory structure (not including the rest of the MVC3 app):

Scripts
-script.js 
Views
-Demo
--pages
---about.html
---contact.html
---home.html
--Index.cshtml
--_ViewStart.cshtml

This is my script.js file where i define the routes.

// create the module and name it scotchApp
var scotchApp = angular.module('scotchApp', []);

// configure our routes
scotchApp.config(function ($routeProvider) {
$routeProvider

    // route for the home page
    .when('/', {
        templateUrl: 'pages/home.html',
        controller: 'mainController'
    })

    // route for the about page
    .when('/about', {
        templateUrl: 'pages/about.html',
        controller: 'aboutController'
    })

    // route for the contact page
    .when('/contact', {
        templateUrl: 'pages/contact.html',
        controller: 'contactController'
    });
});

// create the controller and inject Angular's $scope
scotchApp.controller('mainController', function ($scope) {
    // create a message to display in our view
    $scope.message = 'Everyone come and see how good I look!';
});

scotchApp.controller('aboutController', function ($scope) {
    $scope.message = 'Look! I am an about page.';
});

scotchApp.controller('contactController', function ($scope) {
    $scope.message = 'Contact us! JK. This is just a demo.';
});

This is my index.html code:

    <div ng-app="scotchApp">
    <!-- HEADER AND NAVBAR -->
    <div ng-controller="mainController">
        <nav class="navbar navbar-default">
            <div class="container">
                <div class="navbar-header">
                    <a class="navbar-brand" href="/">Angular Routing Example</a>
                </div>

                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#"><i class="fa fa-home"></i>Home</a></li>
                    <li><a href="#about"><i class="fa fa-shield"></i>About</a></li>
                    <li><a href="#contact"><i class="fa fa-comment"></i>Contact</a></li>
                </ul>
            </div>
        </nav>

        <!-- MAIN CONTENT AND INJECTED VIEWS -->
        <div id="main">
            <!-- angular templating -->
            <!-- this is where content will be injected -->
            <div ng-view></div>
        </div>
    </div>
</div>

Answer 1

With help from the Google Group for AngularJS, which I highly recommend to everyone who needs angularjs help, I now know what went wrong and how to better troubleshoot these kinds of issues.

Here is the tips that I recieved from one of its members:

I can’t say what the issue is specifically in your situation, but in general the way you would troubleshoot it is to check the following:

Is the server configured to return the templates as static html? Verify this by constructing a url manually and loading it directly with a browser (not involving angular at all). You should be able to see the static html. This is a pre-requisite for anything else working. If this doesn't work then the problem is properly configuring .NET and server-side routing.

If the you can get the first step to work, then start your angular app and open up the network tab of your browser’s development tool. If you see 404 requests note the URL. How is it different than the working URL you used above?

If the URL is different, modify the templateUrl parameter accordingly so that it matches the correct URL. If you are still having issues, post an example of the working URL and an example of what URL the browser is requesting when it gets a 404.

Combine this with the fact that I wasn't able to pull up the templates with a static url I found another SO question that directly fixed this issue. How do you request static .html files under the ~/Views folder in ASP.NET MVC?

Answer to my question:
So I created a ~/Static folder to house all of my templates and now my angular app works perfectly because when i request a tempate i can give it a direct url to get it from.

Answer 2

I think you can fix in 2 ways:

method 1: add hash sign like this: <a href="#/about">

method 2: or use html5Mode by setting [$locationProvider][1].html5Mode(true);

like this:

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

    $locationProvider.html5Mode(true);
    $routeProvider
      .when('/', {...