angularJS路由(没有错误)不起作用

时间:2017-09-30 12:33:49

标签: javascript asp.net angularjs asp.net-mvc asp.net-mvc-4

File Structure< - 附于此处 我正在使用asp.net MVC 4创建一个angularJS Web应用程序。我已经仔细配置了路由,但我的部分视图没有被注入,尽管URL更改为该特定路由。我不知道我错过了什么。我认为它与我的文件结构有关,但无法弄明白。

'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>

1 个答案:

答案 0 :(得分:1)

您遗漏了每个模板的.html扩展名

尝试

    $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"

        })