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

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

http://localhost:52211/#/two

它跳转到Home controller，索引动作。

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

Answer 1

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

相对链接

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

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

$locationProvider.html5Mode()

Answer 2

请确保您拥有one中的two，three和MasterController操作方法以及<div ng-view></div>中的视图。

仅在Index页面中保留{{1}}。它应该正常工作。

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>

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

3 个答案: