title: How to use Angular inside of Asp.Net MVC views?
body: <p>I have HTML pages with server rendered content. 
  Now I'm using Angular 1.5 and all pages have <code>ng-app</code> 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:</p>
  
  <pre><code>@model PageViewModel
   &lt;html ng-app="app"&gt; 
   ...
   &lt;body&gt;
      &lt;form&gt; 
        &lt;input type="text" name="@Html.NameFor(x =&gt; x.Name)"/&gt;
  
        &lt;file-upload name="@Html.NameFor(x =&gt; x.Logo)" value="@Html.ValueFor(x =&gt; x.Logo)"&gt;&lt;/file-upload&gt;
        &lt;file-upload name="@Html.NameFor(x =&gt; x.Teaser)" value="@Html.ValueFor(x =&gt; x.Teaser)"&gt;&lt;/file-upload&gt;
  
        &lt;input type="submit"/&gt;   
      &lt;/form&gt;
   &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>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?</p>
  
  <p>I'm trying to do something like this:</p>
  
  <pre><code>@model PageViewModel
   &lt;html&gt; 
   ...
   &lt;body&gt;
   &lt;app-root&gt; 
      &lt;form&gt; 
        &lt;input type="text" name="@Html.NameFor(x =&gt; x.Name)"/&gt;
  
        &lt;file-upload name="@Html.NameFor(x =&gt; x.Logo)" value="@Html.ValueFor(x =&gt; x.Logo)"&gt;&lt;/file-upload&gt;
        &lt;file-upload name="@Html.NameFor(x =&gt; x.Teaser)" value="@Html.ValueFor(x =&gt; x.Teaser)"&gt;&lt;/file-upload&gt;
  
        &lt;input type="submit"/&gt;   
      &lt;/form&gt;
   &lt;/app-root&gt;
   &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>