Why strange behavior when changing $state in Angular?

Question

Angular

Hello!
I'm starting to learn angular set up ui-router. When changing the state (after clicking on the link), the interface twitches (the dom is updated, there is a request for pictures to the server, and the entire window is redrawn).
But for template, you only need to change one div.
What could be the problem?

Answer 1

You are not working with views and states correctly. It seems you are trying to replace ng-include with ui-view. State one should contain a definition for all views, since there can only be one state (ie state) on a page.
In short - now you have a complete mess on the page. Smoke mana on Multiple-Named-Views . You probably need Nested-States
. Also, what confused you the most is that you inserted the template inside a tag with the ui-view attribute. This is done in order to speed up page rendering for the user. As long as you don't need it. Make it simple

<article class="b-article" ui-view="work"></article>
<article class="b-article" ui-view="olympiad"></article>
<article class="b-article" ui-view="sport"></article>
<article class="b-article" ui-view="contest"></article>

and make it work.

Answer 2

But for template, you only need to change one div.

it doesn’t work like that, when the state changes, everything in the block with the ui-view directive changes.