结合 ASP.NET MVC 中的 Angular 路由答案

【问题标题】：Angular Routing in ASP.NET MVC combined结合 ASP.NET MVC 中的 Angular 路由
【发布时间】：2015-08-04 22:47:55
【问题描述】：

我有一个索引页面和一个子页面。在我的索引页面中，我正在尝试渲染我的孩子。但不知何故，事情没有按预期工作，Angular 路由也没有按预期工作

这是我的索引页

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

<h2>Index</h2>

<body ng-app="AngularApp">


    <div> My message {{message1}} </div>

    <a href="FirstChild">First child</a>

    <div></div>



    <div ng-view></div>

</body>

@section scripts{

<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/angular-route.js"></script>
<script src="~/Scripts/angular-resource.js"></script>
<script src="~/Modules/AngularApp.js"></script>

}

这是我定义路由的 angularApp.Js 文件

var myapp = angular.module('AngularApp', ['ngRoute']);

myapp.config(function ($routeProvider, $locationProvider) {

    $routeProvider.when('/',
    {
        templateUrl: '/Index',
        controller: 'IndexController'
    })

    .when('/FirstChild',
  {
      templateUrl: '/Angular/FirstChild',
      controller: 'ChildController'
  });

    $locationProvider.html5Mode(true).hashPrefix('!')

});

myapp.controller('IndexController', function ($scope) {
    alert('My Index');
    $scope.message1 = "My Index";
});

myapp.controller('ChildController', function ($scope) {
    alert('My Child Index');
    $scope.FirstMessage = 'My First Message';
});

这是我用于呈现局部视图的 ASP.NET MVC 操作。我在 ASP.NET MVC 中的控制器名称是 Angular

   public ActionResult FirstChild()
            {
                return PartialView("Firstchild");
            }

问题一：

当我以 Index 作为起始页运行应用程序时，这是我在浏览器中看到的 URL，http://localhost:59367/Angular/Index 但未触发 Angular 侧用于索引页的相应控制器

问题 2：

当我单击索引页面中的第一个子链接时，它会将我带到一个完整的页面，而不是在 ng-view 中呈现部分视图。

http://localhost:59367/Angular/FirstChild

我很确定我定义的 Angular 路由存在严重问题，但无法解决:( 请帮助

问题总结： 进一步分析后发现，一旦我单击“第一个孩子”，理想情况下 URL 应该读作 Angular/Index#/FirstChild 但这里发生的是，“ASP.NET MVC Action First Child 被调用并且 URL正在彻底改变”

【问题讨论】：

我认为这可能是由于您的 templateUrl 期望一个 html 引起的，我认为您可能应该写类似：templateUrl: 'views//main.html'。看看http://stackoverflow.com/questions/24301092/angularjs-routeprovider 就像你的路线的例子。
@AndreaM16，我指的是这个网站wintellect.com/devcenter/dbaskin/… 以及dotnetcurry.com/showarticle.aspx?ID=1054，其中使用partialview 方法呈现.cshtml 文件

标签： asp.net-mvc angularjs angularjs-routing

【解决方案1】：

已发现问题。我关注的文章使用了以下部分

 $locationProvider.html5Mode(true).hashPrefix('!')

在 app.js 文件中。由于本地的一些问题，我已将其删除。但是在这样做的同时，我并没有更新我的索引页面中这一行的部分

<a href="FirstChild">First child</a>

应该是的

 <a href="#FirstChild">First child</a>

现在角度路由开始正常工作，没有任何问题。 :)

更新问题：

我尝试在 d 代码中包含该行，并在我的 href 中删除为 # 但它不起作用。似乎角度路由也必须更新。

  $locationProvider.html5Mode(true).hashPrefix('!')

谁能帮我以正确的格式更新它。

【讨论】：