Question

我有包含服务器呈现内容的HTML页面。现在我使用Angular 1.5并且所有页面都有ng-app，并且角度指令在标记中播种。所以我的应用程序不是单页面应用程序，它使用小部件的角度指令和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>

Answer 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/

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

1 个答案: