title: Cleaner way to add large block of HTML in javascript in rails
body: <p>I have a rails app along with angular, and I need to populate a large block of HTML so that it can fill in default text for textarea tag. Currently what I did was add the text like this</p>
  
  <pre><code>"&lt;div class='navbar navbar-default letter-header hidden-sm hidden-xs'&gt;\n" +
      "  &lt;div class='container'&gt;\n" +
      "    &lt;div class='letter-navbar-header navbar-header'&gt;\n" +
      "      &lt;a href='/'&gt;&lt;img src='/assets/logo.png' class='letters-logo navbar-brand'&gt;&lt;/a&gt;\n" +
      "    &lt;/div&gt;\n" +
  
      "    &lt;div class='navbar-header header-text'&gt;\n" +
      "      &lt;div class='navbar-text'&gt;\n" +
      "        "text" + "\n" +
      "      &lt;/div&gt;\n" +
      "    &lt;/div&gt;\n" +
      "    &lt;div class='letter-navbar-header navbar-header'&gt;\n" +
      "      &lt;a href='/'&gt;\n" +
      "        &lt;img src='' class='second-logo'&gt;\n" +
      "      &lt;/a&gt;\n" +
      "    &lt;/div&gt;\n" +
      "    &lt;div class='navbar-header navbar-right'&gt;\n" +
      "      {{ user_login }}" + "\n" +
      "    &lt;/div&gt;\n" +
      "  &lt;/div&gt;\n" +
      "&lt;/div&gt;\n"
  </code></pre>
  
  <p>I would like to know if there is a cleaner way to do it. I have tried using js.erb file with the render function like this </p>
  
  <pre><code>&lt;%= j render('navbar') %&gt;
  </code></pre>
  
  <p>but placed it in the asset folder so the render function is not working <a href="https://stackoverflow.com/a/8370847/1087841">https://stackoverflow.com/a/8370847/1087841</a>. I would like to know if there is a better way to do it.</p>
  
  <p>[EDIT]
  The js.erb file is actually an angular factory which has default HTML for the navbar, which then can be used by the angular controller to render default data. The factory file is then also gets added to application.js as a require.
  this is the textarea that needs default html </p>
  
  <pre><code>&lt;textarea name="t[navigation]" id="input-navigation-bar" ng-model="t.navigation_bar" class="form-control" rows="10"&gt;&lt;/textarea&gt;
  </code></pre>
  
  <p>I could have placed the value tag with the default html but it has <code>ng-model</code> so nothing gets displayed. So I created a factory for the default data. Now the factory lives in /assets and has a <code>//= require 'default_html_factory'</code> in application.js.</p>