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:

User should see some static html, before dynamic content is loaded. Dynamic content will replace it.
Search engines should track static files, not something like <p>{{myModel2}}</p>

dfsq · Accepted Answer · 2016-06-01 06:59:30Z

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.

answered Jun 1, 2016 at 6:59

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

magic_dev Over a year ago

It worked, thank you so much. I tried it as <div ui-view></div> in first place, it didn't work. When I try your explanation it worked.

Collectives™ on Stack Overflow

Angularjs, replace html content when angular is loaded

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related