404 Error with Angularjs TemplateUrl Routing

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('/', {...

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.