Angular JS MVC 项目中的部分视图答案

【问题标题】：Partial Views in Angular JS MVC projectAngular JS MVC 项目中的部分视图
【发布时间】：2016-04-04 16:51:27
【问题描述】：

我是 Dot Net MVC 的新手，我正在尝试使用 Angular JS 重新构建我的剃刀视图。但有些事情我被困住了。我已经在我的项目中导入了 Angular JS Core 库

我在 BundleConfig.cs 类中也引用了相同的内容。

        //Added for angular reference
        bundles.Add(new ScriptBundle("~/bundles/angular").Include(
        "~/Scripts/angular.min.js"));

在我的自定义布局页面 _myTemplateLayoutPage.cshtml 这反映在：

<html ng-app="">
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Prank Systems Pvt. Ltd.</title>
<link href="@Url.Content("~/Content/myTemplate/")style.css" rel="stylesheet" type="text/css" />
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/jqueryui")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/angular")

但是当我尝试加载局部视图时，局部的 Angular 不起作用。

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


<h2>Index Details</h2>
<input type="text" ng-model="name" />
{{name}}

我知道我没有在我的局部视图中引用 ng-app，而是在布局页面中引用了它。

这是我在浏览器中运行时得到的结果：

【问题讨论】：

How to load MVC Partial View and keep Angular JS working的可能重复

标签： angularjs asp.net-mvc razor

【解决方案1】：

只需将您的 Angular 脚本名称从 angular.min.js 重命名为 angular.js：

然后在你的BundleConfig.cs:

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

此问题的主要原因是因为 Bundler 不包含 min 文件，并且您的 Angular 库未包含在您的项目中。

【讨论】：

@StrugglingCoder，我很高兴能帮上忙……几周前我遇到了同样的问题 :)