为什么 angular 路由在 ASP.NET MVC 中不起作用

Question

我是 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

然后跳转到家庭控制器，索引操作。

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

Answer 1

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

Relative links

Be sure to check all relative links, images, scripts etc. Angular requires you to specify the url base in the head of your main html file (<base href="/my-base">) unless html5Mode.requireBase is set to false in the html5Mode definition object passed to $locationProvider.html5Mode(). With that, relative urls will always be resolved to this base url, even if the initial url of the document was different.

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

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

Answer 2

兄弟，请确保您有 one、two 和 three 操作方法以及 MasterController 中的视图。

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

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

为什么 angular 路由在 ASP.NET MVC 中不起作用

Why angular routes are not working in ASP.NET MVC

angularjs

asp.net-mvc-4

angular-ui-router

asp.net-mvc-routing

angularjs-routing