title: Angular partials
body: <p>Currently I am trying to migrate an existing Knockout application to Angular MEAN stack application. In the knockout, the index.html contains this code </p>
  
  <pre><code>&lt;% layout('layout') -%&gt;
  
  &lt;div data-bind="ifnot: id"&gt;
      &lt;%- partial('partials/invitation-creating.html') %&gt;
  &lt;/div&gt;
  
  &lt;div data-bind="if: id"&gt;
      &lt;%- partial('partials/invitation-done.html') %&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>How can I achieve this kind of partial html file loading with-in Angular route with single controller (or) multiple controllers. After saving the 'invitation-creating.html' page, I should be able to go to 'invitation-done.html' but url should be the same ( I do NOT want this -> websiteurl/invitation_id)</p>
  
  <p>See that in action <a href="http://invitify.azurewebsites.net" rel="nofollow">http://invitify.azurewebsites.net</a>, when you create an invitation then it will take you to the next page (invitation-done.html) without browser changing it's url. This was achieved in knockout but I want to achieve the same effect in my Angular app too. The Knockout code is here on github for you to see more closely. <a href="https://github.com/scriptstar/KOInvitify" rel="nofollow">https://github.com/scriptstar/KOInvitify</a></p>
  
  <p>What is the best practice to achieve this type of behavior in Angular application. </p>
  
  <p>Please help. Thanks.</p>