Angularjs, replace html content when angular is loaded

Question

I have an angular app with a page and dynamic content. I use ui router for routing.

I want user to see static html which server side rendering will return it, and when angular is loaded, change html content with ur router templates.

sample static html is:

<div ui-view>
  <div>Lorem Ipsum</div>
  <p>Lorem Ipsum</p>
  <span>Lorem Ipsum</span>
<div> 

sample ui router template is:

<div>
  <div>{{myModel}}</div>
  <p>{{myModel2}}</p>
  <span>Lorem Ipsum</span>
<div>

My aims:

1. User should see some static html, before dynamic content is loaded. Dynamic content will replace it.

2. Search engines should track static files, not something like <p>{{myModel2}}</p>

Answer 1

I think you can make static content visible before ui-router is resolved like this:

<ui-view>
  <div>Lorem Ipsum</div>
  <p>Lorem Ipsum</p>
  <span>Lorem Ipsum</span>
</ui-view>

Using ui-view as custom tag will render inner HTML without any changes to it, however when route is resolved this content will be replaced with actual route template.