Tutorial: Master Detail Pattern

tutorials
1

“A Master Detail Interface is a common pattern in computer systems where a master list is displayed, and when an item is selected, more details about that item are displayed in a separate view. This can be found all over the place from a contact list (list of contacts being the master list, clicking on a contact shows you the “details” of that contact) to a text messages app, to search results.”

1 Like
2

Nice tutorial, thank you! :slight_smile: However your service will load the people resource in the GetPeople() method each time the method is called. This means that the main advantage of using services isn’t utilized. You can do two things: one is to check if the people array is empty and only then use the http or use the Angular cache option. Check the network traffic in the network tab of Chrome developert tools.

3

This works for mobile app, but in a webapp or if you are reloading a state… it will not work, if you are on a detail page, because the people array will be empty.

you can solve this with an abstract parent state for both, that load first all people data and broadcasts an event to the child scopes, so can be sure that you have always the people data in your detail view.

In Most-cases you need an extra request on the detail-view, because if you have an api -> list requests should only return the necessary fields like “id, label, …” all not necessary things should be requested over a detail-request to get special or big data like long texts and so on.

Greetz.

4

For some reason i can not get this to work the way you have implemented it.

My problem is that the response which is returned from invoking methods on the service always shows up as undefined…

Let’s say:

GetPeople: function(){ 
            $http.get("path/to/resource").then(function(response){
                console.log(response);
                return response;
            });
        },

Response here has the correct object, i can see it in console log, but, when i call it form my controller…

console.log(PeopleService.GetPeople());

This comes back undefined…

I was actually explicitly using a callback on my service to get it working before reading your tutorial.

5

I have figured it out…

On your controller you are doing:

PeopleService.GetPeople().then(function(people){ ... }

But this only works if GetPeople() returns a promise, which is not the case. So your function GetPeople actually needs to be:

GetPeople: function(){ 
            return $http.get("path/to/resource").then(function(response){
                people = response.data;
                return response.data;
            });
        },