为什么角度路由在 ASP.NET MVC 中不起作用答案

【问题标题】：Why angular routes are not working in ASP.NET MVC为什么角度路由在 ASP.NET MVC 中不起作用
【发布时间】：2016-03-23 10:12:47
【问题描述】：

我是 angularjs 的新手，并在 ASP.NET MVC 中实现它。我阅读了几篇文章并实现了如下代码，

这是我的布局页面，

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>angular demo</title>
    <script src="~/Scripts/modernizr-2.6.2.js"></script>
    <script src="~/Scripts/angular.js"></script>
    <script src="~/Scripts/angular-route.js"></script>
    <script>
        var schoolModule = angular.module("schoolModule", ['ngRoute']);

        schoolModule.config(function ($routeProvider) {
        $routeProvider.when('/one', {
            templateUrl: "Master/One",
            controller: "OneController"
        })
        .when('/two', {
            templateUrl: "Master/Two",
            controller: "TwoController"
        })
        .when('/three', {
            templateUrl: "Master/Three",
            controller: "ThreeController"
        })
        .otherwise({
            redirectTo: 'Master/One'
        });
    });


        schoolModule.controller("OneController", function ($scope) {
            $scope.message = "One message";
        });


        schoolModule.controller("TwoController", function ($scope) {
            $scope.message = "Two message";
        });


        schoolModule.controller("ThreeController", function ($scope) {
            $scope.message = "Three message";
        });
    </script>
</head>
<body ng-app="schoolModule">
    <header>Title</header>
    @RenderBody()
    <footer>Footer here</footer>
</body>
</html>

我的索引页面是，

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Master.cshtml";
}
<a href="/#/one">One</a>
<a href="/#/two">Two</a>
<a href="/#/three">Three</a>
<div ng-view>
</div>

我还创建了 3 个局部视图，只有消息。

<div ng-controller="OneController">
    {{message}}
</div>

这里，当我运行项目时，URL 是，

http://localhost:52211/Master/index#/Master/one

当我点击第二个按钮时，它会将我重定向到不同的控制器和操作，但 url 是，

http://localhost:52211/#/two

它会跳转到 Home 控制器，索引操作。

请告诉我我在这里犯了什么错误，以及如何使它起作用？谢谢。

【问题讨论】：

标签： angularjs asp.net-mvc-4 angular-ui-router asp.net-mvc-routing angularjs-routing

【解决方案1】：

您需要设置<base> HTML5 标签。来自AngularJS documentation：

相对链接

请务必检查所有相关链接、图像、脚本等。Angular 要求您在主 html 文件 (<base href="/my-base">) 的头部指定 url 基础，除非在 html5Mode 中将 html5Mode.requireBase 设置为 false定义对象传递给$locationProvider.html5Mode()。这样，即使文档的初始 url 不同，相对 url 也将始终解析为该基本 url。

在您的布局页面中，添加带有 尾部斜杠的基本 URL。例如：

<base href="/Master/index/" />

【讨论】：

它使我的 url 变得干净，但视图没有呈现在 ng-view div 标签中。
当您使用base 标签时，您的资源也将与基础相关，因此您必须相应地更新您的templateUrl。
我会试试的，一定会回复你（Y）。
已解决，无需设置基本标签和 HTML5 模式。我的网址有点不清楚，但导航工作。
@KevalPatel 太棒了！你想发布你的答案并接受它，以防有相同问题的人找到这个吗？

【解决方案2】：

请确保您有 one、two 和 three 操作方法，并在 MasterController 中查看。

仅将<div ng-view></div> 保留在Index 页面中。它应该可以正常工作。

【讨论】：

【解决方案3】：

我就是这样解决的，如果有人也遇到同样的问题，

@{
    Layout = null;
}

<!DOCTYPE html>

<html>

<head>
    <meta name="viewport" content="width=device-width" />
    <title>angular demo</title>
    <script src="~/Scripts/modernizr-2.6.2.js"></script>
    <script src="~/Scripts/angular.js"></script>
    <script src="~/Scripts/angular-route.js"></script>
    <script>
        var schoolModule = angular.module("schoolModule", ['ngRoute']);

        schoolModule.config(function ($routeProvider, $locationProvider) {
            $routeProvider.when('/One', {
                templateUrl: "/Master/One",
                controller: "OneController"
            })
            .when('/two', {
                templateUrl: "/Master/Two",
                controller: "TwoController"
            })
            .when("/three", {
                templateUrl: "/Master/Three",
                controller: "ThreeController"
            });

        });
        schoolModule.controller("OneController", function ($scope, callService, callFactory) {
            //$scope.message = "One message";
            //$scope.message = callService.message();
            $scope.message = callFactory.message();
        });
        schoolModule.controller("TwoController", function ($scope) {
            $scope.message = "Two message";
        });
        schoolModule.controller("ThreeController", function ($scope) {
            $scope.message = "Three message";
        });

        schoolModule.factory("callFactory", function($http){
            var serviceObj = {};
            serviceObj.message = function () {
                return "Result from factory";
            };
            return serviceObj;
        });

        schoolModule.service("callService", function ($http) {
            this.message = function () {
                return "Result from service";
            };
        });
    </script>
</head>
<body ng-app="schoolModule">

    <header>Title</header>
    @RenderBody()

    <footer>Footer here</footer>
</body>
</html>

我的索引视图是，

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Master.cshtml";
}

<a href="#/One">One</a>
<a href="#/two">Two</a>
<a href="#/three">Three</a>
<ng-view></ng-view>

【讨论】：