Angular: data reuse priniciples vs making server calls

I am struggling with figuring out some of the data reuse principles using Angular and Web Api.

Let's have an example. I am creating an administrative website of CRUD forms.

Objects: Specializations (parent) Name (string, child of specialization) Description (string, , child of specialization) Requirements(collection, child of specialization) Challenges(collection, child of specialization) ChallengeName (string, child of Challenges) StartDate(Date, child of Challenges) Activities(collection, child of Challenges)

On the main page I will make a call to GetAllSpecializations and list them. On this page you might have 3 challenges associated to that Specialization.

I will select one of the challenges to get details about that challenge. At this point would I query the client side object made in the initial GetAllSpecializations service call? Or would I need to make a separate call to GetSpecialization(id) API call.

The latter is a typical way of doing things but was thinking there was some data reuse that can happen across CRUD views without make calls to get all the details on each view.

Thanks for any clarification on best practices.

That all depends on size of your data in the initial call. If it is static, not more than few KBs and you are not worried about the initial response tine, you can fetch all records and store it in scope. Then you can show/hide the data as needed.

Calling service for each individual item will be of course fast because of less response data but it will increase number of service call hence network traffic.

First approach will always be good although it takes slightly more time in page load but subsequent requests are served immediately.