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"

        })