如何在 Asp.Net MVC 视图中使用 Angular？答案

【问题标题】：How to use Angular inside of Asp.Net MVC views?如何在 Asp.Net MVC 视图中使用 Angular？
【发布时间】：2017-05-24 15:13:26
【问题描述】：

我有带有服务器渲染内容的 HTML 页面。现在我使用的是 Angular 1.5，所有页面都有 ng-app 并且 angular 指令都在标记中播种。所以我的应用程序不是单页应用程序，它对小部件和 UI 控件使用角度指令。例如：

@model PageViewModel
 <html ng-app="app"> 
 ...
 <body>
    <form> 
      <input type="text" name="@Html.NameFor(x => x.Name)"/>

      <file-upload name="@Html.NameFor(x => x.Logo)" value="@Html.ValueFor(x => x.Logo)"></file-upload>
      <file-upload name="@Html.NameFor(x => x.Teaser)" value="@Html.ValueFor(x => x.Teaser)"></file-upload>

      <input type="submit"/>   
    </form>
 </body>
</html>

我想将视图迁移到 Angular 4，但它看起来非常专注于具有一个根组件的单页应用程序。如何在 Angular 4 上执行相同的代码？我应该将所有页面内容放在有角度的根元素还是其他东西？

我正在尝试做这样的事情：

@model PageViewModel
 <html> 
 ...
 <body>
 <app-root> 
    <form> 
      <input type="text" name="@Html.NameFor(x => x.Name)"/>

      <file-upload name="@Html.NameFor(x => x.Logo)" value="@Html.ValueFor(x => x.Logo)"></file-upload>
      <file-upload name="@Html.NameFor(x => x.Teaser)" value="@Html.ValueFor(x => x.Teaser)"></file-upload>

      <input type="submit"/>   
    </form>
 </app-root>
 </body>
</html>

【问题讨论】：

看看这个仓库：github.com/mithunvp/ng2Mvc5Demo
@lbrahim 问题是如何将服务器生成的代码放入 Loading...

标签： asp.net-mvc angular

【解决方案1】：

如果您可以处理每页有 1 个组件，则更简单的方法是渲染 js 文件并将它们复制到文件夹中，然后调用 <app-root>

我有一个例子来玩这个想法http://bresleveloper.blogspot.co.il/2017/09/angular-4-with-net-webformsmvc-tutorial.html

对于集成度更高的解决方案http://www.mithunvp.com/using-angular-2-asp-net-mvc-5-visual-studio/

【讨论】：