AngularJS与ASP.net MVC
好吧，这似乎是我的优势。
我一直在读一篇又一篇的博客，在这些博客里，男人们解释了如何实现这个目标，但是经过无数个小时的移除、添加、改变、调试、拔头发、大量的咖啡和没有运气的工作，我转向这里寻求一些专业的见解。
正如标题所暗示的那样，我正在尝试在一个具有Razor视图的MVC 5中工作，但是我正在经历一些非常奇怪的行为。
首先，在页面加载时，角不起作用。我必须刷新登陆页面至少5-10次才能启动。
当它最终发挥作用时，Chrome会过度燃烧，在崩溃之前消耗掉几乎所有可用的资源。开发人员工具中的控制台提供了一条消息“警告:尝试多次加载角”。
这个错误非常具有描述性，所以我假设当客户端路由最终启动时，我将加载_layout.cshtml页面两次，但每个Razor视图都包含@{ Layout = null }调用，正如在许多博客上解释的那样。
我已经试过了我能读到的所有东西，但我无法通过这个问题。
以下是我的代码：
ASP.Net Razor View
1.) _Layout.cshtml
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="webStudio" data-ng-controller="StudioController">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title data-ng-bind="Page.title">...</title>
<base href="/" />
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="page {{css}}" data-ng-view="">
@RenderBody()
</div>
<div class="__javascript-webstudio">
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/ng")
@Scripts.Render("~/bundles/yeti")
@Scripts.Render("~/bundles/ngapp")
@Scripts.Render("~/bundles/ngfactory")
@Scripts.Render("~/bundles/ngservice")
@Scripts.Render("~/bundles/ngcontroller")
@RenderSection("scripts", required: false)
</div>
</body>
</html>我假设，因为_layout.cshtml用于索引页(Home)，所以应该在这里进行角实例化。我见过一些博客，它们一起跳过_layout.cshtml，但是为了保持它的一致性，我希望这是我的起点。我尝试不使用Home/Index中的布局，并在其中调用我的所有脚本，但它做的事情完全相同，有几次刷新和警告。
( 2.)Home/Index.cshtml
@*{
Layout = null
}*@
<a href="@Url.Action("Index", "Gallery")">Go there</a>Layout = null已经被注释掉了，因为这导致_layout.cshtml甚至没有加载我的JS文件，奇怪的行为:/
( 3.)图库/Index.cshtml
@{
Layout = null;
}
Date: @DateTime.Now这只是测试路线的一页。
( 4.)Web.config
<rewrite>
<rules>
<rule name="AngularJS" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
<add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>重写规则对于确保适当地完成路由非常重要。我使用HTMLMode作为角度，所以这一步是至关重要的。
( 5.)app.js
var webStudio = angular.module("webStudio", ["ngRoute"]);
webStudio.config(function ($routeProvider, $locationProvider)
{
$routeProvider
.when("", {
templateUrl: "/Home",
controller: "HomeController"
})
.when("/", {
templateUrl: "/Home",
controller: "HomeController"
})
.when("/Home", {
templateUrl: "/Home",
controller: "HomeController"
})
.otherwise({ redirectTo: "/Error/NotFound" });
$locationProvider.html5Mode(true);
});这并没有什么奇怪的，它创建了角度应用程序引用，将路由附加到模块上，并在那里形成了我配置的路由行为。
据我所读和理解的，调用控制器/动作块是有意义的，就像您在ASP.Net MVC中通常所做的那样。
我没有触及MVC的默认路由，因为它与这个范围无关。
我不知道为什么会发生这种行为，也不知道从哪里开始调查。我读过关于刷新问题的博客，并尝试过已经声明过的内容，但在这种情况下，我只是无法让它发挥作用。
更新
( 6.)BundleConfig.cs
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery")
.Include("~/Scripts/vendor/jquery/jquery-{version}.js")
.Include("~/Scripts/vendor/jquery/jquery.validate.js"));
bundles.Add(new ScriptBundle("~/bundles/ng")
.Include("~/Scripts/vendor/angularjs/angular.js")
.Include("~/Scripts/vendor/angularjs/angular-route.js"));
bundles.Add(new ScriptBundle("~/bundles/yeti")
.Include("~/Scripts/vendor/ngfoundation/mm-foundation-0.6.0.js"));
bundles.Add(new ScriptBundle("~/bundles/ngapp")
.Include("~/Scripts/app.js"));
bundles.Add(new ScriptBundle("~/bundles/ngfactory")
.Include("~/Scripts/factories/studio.js"));
bundles.Add(new ScriptBundle("~/bundles/ngservice")
.Include("~/Scripts/services/studio.js"));
bundles.Add(new ScriptBundle("~/bundles/ngcontroller")
.Include("~/Scripts/controllers/studio.js"));
bundles.Add(new ScriptBundle("~/bundles/modernizr")
.Include("~/Scripts/vendor/modernizr-*"));
bundles.Add(new StyleBundle("~/Content/css")
.Include("~/Content/normalize.css")
.Include("~/Content/foundation.css")
.Include("~/Content/site.css"));
}回答 1
Stack Overflow用户
发布于 2015-12-03 18:36:42
我想这会帮你AngularJS与ASP.net MVC
要在angularJS mvc应用程序中安装asp.net，请执行以下步骤
- 首先加载所需的js。您可以使用asp.net mvc包。 Bundles.Add(新的ScriptBundle(~/ScriptBundle/角).Include(“~/Script/angular.js”、“~/Script/角-route.js”)；
- 修改_Layout.cshtml
- 添加一个新的js文件，用于添加angularjs模块、控制器等，这里'ngRoute‘是可选的(如果您不想使用angularjs路由，则不需要) (函数() {/创建一个Module应用程序= angular.module('MyApp'，'ngRoute')；//将在实现路由/创建控制器app.controller('HomeController'，function ( $scope ) { // $scope){//$scope用于在视图和控制器$scope.Message = "Yahoooo之间共享数据！我们已经成功完成了第一部分“；})时使用‘ng-路由’；}；
- 为获取视图向控制器中添加新的操作。 公共ActionResult索引(){返回视图()；}
- 添加操作和设计视图。 @{ ViewBag.Title =“索引”；}索引{消息}}
- 运行应用程序。
https://stackoverflow.com/questions/30392313
复制相似问题
腾讯云开发者
