AngularJS 与 ASP.net MVC答案

【问题标题】：AngularJS with ASP.net MVCAngularJS 与 ASP.net MVC
【发布时间】：2015-05-22 08:51:15
【问题描述】：

好吧，这似乎让我变得更好了。

我一直在阅读一个又一个博客，人们在其中解释如何实现这一点，但经过无数小时的删除、添加、更改、调试、拉头发、大量咖啡和没有运气得到这个为了工作，我转向这里寻求一些专业见解。

正如标题所暗示的，我正在尝试在具有 Razor 视图的 MVC 5 中工作，但我遇到了一些非常奇怪的行为。

首先，角度不会在页面加载时发挥作用。我必须刷新着陆页至少 5 到 10 次才能启动。

当它最终运行时，Chrome 会进入超负荷状态，在崩溃之前消耗几乎所有可用资源。开发者工具中的控制台出现一条消息“警告：尝试多次加载角度”。

该错误非常具有描述性，因此我假设我正在加载 _layout.cshtml 页面两次，此时客户端路由最终启动，但每个 Razor 视图都包含 @{ Layout = null } 调用，因为它已经在很多博客上进行了解释。

我已经尝试了所有可能阅读的内容，但我无法通过这个问题。

下面是我的代码：

ASP.Net Razor 视图

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 用于索引页面（主页），所以它应该发生角度实例化。我已经看到他们一起跳过_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 用于 Angular，因此这一步至关重要。

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"));
}

【问题讨论】：

你的BundleConfig.js是什么样的？
@devqon 我也想到了，我绝对不会从我所看到的情况下加载它两次
@JadedEric 我有同样的情况并且有一个不可阻挡的警告警告：尝试多次加载角度。你找到它的解决方案了吗？

标签： angularjs razor asp.net-mvc-5

【解决方案1】：

我想这会对你有所帮助AngularJS with ASP.net MVC

要在 asp.net mvc 应用程序中设置 angularJS，请按照以下步骤操作

先加载需要的js。你可以使用 asp.net mvc 包

bundles.Add(new ScriptBundle("~/bundles/angular").Include( "~/Scripts/angular.js", "~/Scripts/angular-route.js"));

修改_Layout.cshtml

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>@ViewBag.Title</title>
        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")
    </head>
        @* Here  ng-app="MyApp" is used for auto-bootstrap an AngularJS application. here ng-app="MyApp" means <body> element is the owner 
        of AngularJS application*@
    <body ng-app="MyApp">
        @RenderBody()

        @Scripts.Render("~/bundles/jquery")
        @* Add Angular Library Here *@
        @Scripts.Render("~/bundles/angular")
        <script src="~/Scripts/MyApp.js"></script>
        @RenderSection("scripts", required: false)
    </body>
    </html>

添加一个新的 js 文件用于添加 angularjs 模块、控制器等。这里的 'ngRoute' 是可选的（如果你不想使用 angularjs 路由，则不需要）

   (function () {
        //Create a Module 
        var app = angular.module('MyApp', ['ngRoute']);  // Will use ['ng-Route'] when we will implement routing
        //Create a Controller
        app.controller('HomeController', function ($scope) {  // here $scope is used for share data between view and controller
            $scope.Message = "Yahoooo! we have successfully done our first part.";
        });
    })();

在控制器中添加新操作以获取视图。

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

为动作和设计添加视图。

   @{
        ViewBag.Title = "Index";
    }

    <h2>Index</h2>
    <div ng-controller="HomeController">
        {{Message}}
    </div>

运行应用程序。

【讨论】：