angularJS routes(with no error) not working

Question

File Structure <-- attached here I am making a angularJS web app with asp.net MVC 4.I have carefully configured routes but my partial view is not being injected, although URL changes to that specific route. I don't know what I am missing. I think its something with my file structure but couldn't figure it out.

'use strict';

var app = angular.module('foodyApp', ['ngMaterial', 'ngRoute', 'ngMessages'])
    .config(function ($mdThemingProvider) {
        $mdThemingProvider.theme('default')
        .primaryPalette('green')
        .accentPalette('red')
        .dark();
    })

    .run(function () {
        console.log("App Runs fine");

    })

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

        $routeProvider

            .when("order", {
                templateUrl: "~/Partials/order",
                controller: "orderController"
            })
            .when("menu", {
                templateUrl: "~/Partials/menu",
                controller: "menuController"
            })
            .when("about", {
                templateUrl: "~/Partials/about",
                controller: "aboutController"
            })
            .when("contact", {
                templateUrl: "~/Partials/contact",
                controller: "contactController"
            })
            .when("billing", {
                templateUrl: "~/Partials/billing",
                controller: "billingController"

            })
        
        $locationProvider.html5Mode(
            {
                enabled: true,
                requirebase: false
            })
    });

@{
    ViewBag.Title = "FCMS";
}

<header md-page-header md-gt-sm>
    <div md-header-picture style="background-image:url(img/pizza.jpg)">
    </div>
    <md-toolbar scroll>
        <div class="md-toolbar-tools">
            <h2 md-header-title flex md-gt-sm>Food Court Managment System</h2>

            <md-button href="menu" aria-label="About">
                Menu
            </md-button>
            <md-button href="about" aria-label="About">
                About
            </md-button>
            <md-button href="contact" aria-label="Contact">
                Contact Us
            </md-button>
        </div>
    </md-toolbar>
    <div class="main-fab" ng-controller="orderController">
        <md-button href="order" class="md-fab md-accent" aria-label="Order Now">
            <md-icon md-svg-src="img/ic_restaurant_menu_black_48px.svg"></md-icon>
        </md-button>
    </div>
</header>

<section>
    <div flex-gt-md="100" flex layout="column">
        <div layout="row">
            <div>
                <div>
                    <md-content layout-padding>
                        <div>
                            <ng-view> </ng-view>
                        </div>
                    </md-content>
                </div>
            </div>
        </div>
    </div>
</section>

Answer 1

You left out the .html extension for each of the templates

Try

    $routeProvider

        .when("order", {
            templateUrl: "/Partials/order.html",
            controller: "orderController"
        })
        .when("menu", {
            templateUrl: "/Partials/menu.html",
            controller: "menuController"
        })
        .when("about", {
            templateUrl: "/Partials/about.html",
            controller: "aboutController"
        })
        .when("contact", {
            templateUrl: "/Partials/contact.html",
            controller: "contactController"
        })
        .when("billing", {
            templateUrl: "/Partials/billing.html",
            controller: "billingController"

        })