How to use Angular inside of Asp.Net MVC views?

Question

I have HTML pages with server rendered content. Now I'm using Angular 1.5 and all pages have ng-app and angular directives are seeded in markup. So my app is not no single page application, it uses angular directives for widgets, and UI controls. For example:

@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>

I want to migrate views to Angular 4, but it looks very focused on single page application with one root component. How can I do same code on Angular 4? Should I place all page content inside of angular root element or something else?

I'm trying to do something like this:

@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>

@lbrahim question is how to place server generated code inside of <my-app>Loading...</my-app> — Alexey Ryazhskikh
– Alexey Ryazhskikh, Commented May 24, 2017 at 15:42

bresleveloper · Accepted Answer · 2017-09-17 01:26:59Z

1

a more simple way, if you can handle having 1 component per page, is to render the js files and copy them to a folder and just call <app-root>

i have an example playing with the idea http://bresleveloper.blogspot.co.il/2017/09/angular-4-with-net-webformsmvc-tutorial.html

for a more heavily integrated solution http://www.mithunvp.com/using-angular-2-asp-net-mvc-5-visual-studio/

answered Sep 17, 2017 at 1:26

bresleveloper

6,0743 gold badges35 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to use Angular inside of Asp.Net MVC views?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related