AngularJS 路由和 ASP.net MVC

Question

我正在学习 angular，我第一次尝试使用路由，但它有问题，这是行不通的：

这是我的主要观点（UsingDirectivesWithDataBinding.cshtml）：

@{
    Layout = null;
}

<html>
<head>    
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
    <script type="text/javascript" src="~/Scripts/angular-route.js"></script>
    <script type="text/javascript" src="~/Scripts/AngularFile.js"></script>
    <title>
        Using AngularJS Directives and Data Binding
    </title>
</head>
<body>

    <div data-ng-app="myApp" data-ng-controller="SimpleController">       
        <a href="#/view1"> View 1</a>
        <a href="#/view2"> View 2</a>
        <div data-ng-view=""></div>
    </div>

</body>
</html>

如您所见，我有两个链接调用此路由：'#/view2' 或此链接：'#/view1' 但它会将我带到 Home Controller 的索引页面，而不是停留在同一页面并显示部分视图我想显示。 这是我在家庭控制器中的代码：

public ActionResult UsingDirectivesWithDataBinding()
        {
            return View();
        }

        public PartialViewResult View1()
        {
            return PartialView();
        }

        public PartialViewResult View2()
        {
            return PartialView();
        }

这是我的 Javascript 文件（AngularFile.js）：

var app = angular.module("myApp", ["ngRoute"]);
app.controller("SimpleController", function ($scope) {
    $scope.firstName = "John";
    $scope.lastname = "Doe";
    $scope.customers = [
        { name: "Dave Jones", city: "Phoenix" },
        { name: "Jamie Riley", city: "Atlanta" },
        { name: "Heedy Rowt", city: "Memphis" },
        { name: "Thomas Winter", city: "Seattle" }
    ];
});

app.config(function ($routeProvider) {
    $routeProvider.when("/view1", {
        templateUrl: "/Home/View1",
        controller: "SimpleController"
    })
    .when("/view2", {
        templateUrl: "/Home/View2",
        controller: "SimpleController"
    })
    .otherwise({redirectTo : "/view1"})
})

为什么不工作？

Answer 1

Angular 1.6 使用了一个新的 hashPrefix，在你的 href 中尝试将 #/view1 更改为 #!/view1。

Answer 2

我认为您在服务器端（ASP.net）路由和客户端（Angular.js）路由之间感到困惑。 不确定您是否正在尝试从 ASP.net 呈现视图并将其提供给角度路由器。 如果是，那么不幸的是，这将不起作用。 Angular 路由器不会通过服务器调用来获取视图。 视图必须作为模板（HTML 静态文件）在客户端随时可用，并且 angular 将在模板上呈现数据（从 API 获取后）。

所以基本上这一行templateUrl: "/Home/View1"将变成templateUrl: "/Home/View1.html"其中 View1.html 是一个静态文件（角度模板）。

有关更多详细信息，请查看 > AngularJs routing with Asp.Net Mvc

AngularJS 路由和 ASP.net MVC

问题描述

2 个解决方案

解决方案1
1 已采纳 2017-01-23 06:42:19

解决方案2
0 2017-01-23 06:58:51

AngularJS 路由和 ASP.net MVC

问题描述

2 个解决方案

解决方案1 1 已采纳 2017-01-23 06:42:19

解决方案2 0 2017-01-23 06:58:51

解决方案1
1 已采纳 2017-01-23 06:42:19

解决方案2
0 2017-01-23 06:58:51