简单地将 Angular 添加到 MVC 不起作用？答案

【问题标题】：Simple adding of Angular to MVC not working?简单地将 Angular 添加到 MVC 不起作用？
【发布时间】：2016-04-22 01:49:55
【问题描述】：

我将创建一个使用 Angular 的简单 MVC 项目。我想我已经正确设置了所有东西，但显然我错过了一些可能很简单的东西。

当我运行该站点并查看开发人员工具时，它看起来好像 jQuery 是在 Angular 之前加载的。我不知道为什么会这样，也不知道如何强制它先加载。

我正在使用 VS 2015 并使用 Web API 应用程序创建了一个简单的 MVC。我将 Angular.js v1.5 添加到我的脚本文件夹中，将 ng-app 添加到正文中，并将 angular.js 添加到捆绑配置文件中。我确实重命名了捆绑包，但我认为这不是问题。

这是我的 BundleConfig。我将角度文件添加到 jquery 包中，并将其重命名为“工具”。我确保 angular 出现在 jquery 之前。

public static void RegisterBundles(BundleCollection bundles)
{
    bundles.Add(new ScriptBundle("~/bundles/tools").Include(
                "~/Scripts/angular.min.js",
                "~/Scripts/jquery-{version}.js"));

    bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                "~/Scripts/jquery.validate*"));

    // Use the development version of Modernizr to develop with and learn from. Then, when you're
    // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
    bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                "~/Scripts/modernizr-*"));

    bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
              "~/Scripts/bootstrap.js",
              "~/Scripts/respond.js"));

    bundles.Add(new StyleBundle("~/Content/css").Include(
              "~/Content/bootstrap.css",
              "~/Content/site.css"));
}

这是我的 _Layout 页面。我将页脚中包的名称更改为“工具”以匹配我的包。我还将 ng-app 添加到我的 body 标签中。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - CPP Customer Call</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body data-ng-app="cppApp">
    <div class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("CPP Customer Call", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
                @Html.Partial("_LoginPartial")
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; 2016 - @DateTime.Now.Year</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/tools")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

现在我只是想写一个简单的表达式。

<h2>Angular {{ 1 + 1 }}</h2>

查看页面只显示“Angular {{ 1 + 1 }}”而不是“Angular 2”。

【问题讨论】：

我敢打赌，您的浏览器控制台中存在一些角度错误。您还需要根据您的 html 正文标签定义一个名为 cppApp 的角度模块，此脚本需要在角度库之后加载。
除了@Igor 所说的cppApp，如果你想使用自动引导来测试Angular 正在加载，那么不要给data-ng-app 属性命名。
在尝试了上述评论提供的解决方案后，如果它仍然不起作用，请从包中删除 angular.min.js 并在视图中添加脚本并检查。让 bundles/tools 只包含 jquery
我从 data-ng-app 中删除了“cppApp”并修复了它。因此，基于此和建议，我猜如果我给 ng-app 一个名称，那么我将需要定义一个模块。我会这样做，但我只是首先想确保 Angular 正常工作。感谢所有建议....知道这将是一件小事，但至少我学到了一些东西。
如果你已经解决了你的问题，不要把它放在问题中。创建一个答案并将其标记为这样。没有人会在您的 questino 中看到它。

标签： angularjs asp.net-mvc

【解决方案1】：

所以问题是我为 ng-app 应用了一个应用名称，但没有先为它创建一个模块。这就是我修复它的方法。希望它可以帮助别人。

创建一个 app.js 文件。我把它放在我的 Scripts/App/app.js 结构中。

(function () {
    var app = angular.module('cppApp', []);      //('moduleName', [array of injected modules])
}());

并将我的 BundleConfig.cs 更新为此

bundles.Add(new ScriptBundle("~/bundles/tools").Include(
                        "~/Scripts/angular.min.js",
                        "~/Scripts/App/app.js",
                        "~/Scripts/jquery-{version}.js"));

【讨论】：