How in Angular JS 1.5 to organize the loading of data from the RESTful API of the server before rendering the component (component) and binding (bindings) of objects?

Question

JavaScript

Hello!
The application is built on https://github.com/AngularClass/NG6-starter.
The problem is the following. There is a list of orders and viewing one order. When I click on an order in the list, a request is sent to the RESTful server to get the details of the order. At this moment, the view component of one order is displayed, where bindings: {order: '<'}. As a result, I get emptiness, because at the moment the order is displayed, the data does not have time to come from the server and the order is still empty.
When the application is without participation with the server, such as TODO list, then everything is simple and there are no problems. But what about interacting with the server and waiting for a response from it?

Answer 1

<div ng-if="dataLoaded">
  <!-- stuff -->
</div>

Answer 2

1) Use the Dmitry Kravchenko option with the loaded variable
2) If ui-router is used, do the calculations in resolve.

Answer 3

www.codelord.net/2015/12/25/configuring-components...

Answer 4

Thanks for the tip.
If the user goes to the page by url directly (without clicking in the application), then resolve will also help and load the data before the bindings?
The second question: there is a page with a master detail in one window (on the left is the master list, on the right is the detailing of the selected one from the list). The detail is also loaded from the server at the time of the click.
In this case, what is the best way to bind, display data? Create a separate Factory (service) where to load data, and then pull it out of it?