CODEWITHSUNDEEP
asp.net-mvcangular
Alexey Ryazhskikh
Alexey Ryazhskikh

Reputation: 2500

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

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>

Upvotes: 2

Views: 2608

Answers (1)

bresleveloper
bresleveloper

Reputation: 6070

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/

Upvotes: 1

Related Questions