title: Dart: dynamic redirection without reload
body: <p>Please note I'm not interested in a Polymer-, Angular- or route-based solution here. I'm trying to learn "pure" Dart here, and while I'll likely switch to using one of those frameworks down the road, I need to have a good understanding of the fundamentals first.</p>
  
  <p>In Dart, is it possible to download a whole bunch of HTML "snippets" (see below) all at once (at app startup), and then load them into the browser (either the entire window or just inside a particular <code>&lt;div&gt;</code> element, etc.) dynamically?</p>
  
  <p>For instance, my HTML file might have a <code>&lt;div&gt;</code> element:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;body&gt;
      &lt;!-- lots of HTML --&gt;
  
      &lt;div id="container"&gt;&lt;/div&gt;
  
      &lt;!-- more HTML --&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>And I would like to download two "snippets" (DOM subtrees, HTML templates) of HTML, and dynamically load either one of them into the <code>container</code> div tag. Perhaps one of the snippets looks like this:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;h1&gt;I'm Snippet #1!!!&lt;/h1&gt;
  &lt;input type="button" name="redPillButton" value="Red Pill!" /&gt;
  </code></pre>
  
  <p>And another snippet my look like:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;h1&gt;I'm Snippet #2!!!&lt;/h1&gt;
  &lt;input type="button" name="bluePillButton" value="Blue Pill!" /&gt;
  </code></pre>
  
  <p>Can the two snippets be inside their own HTML file, or do I <strong>have</strong> to put them inside one big file and extract out the "snippet" that I want to load? Either way, how do I accomplish this in a Dart web app?</p>