如何通过多次调用在Angular JS服务或控制器中建立模型数据？

Question

I need to show the results of multiple calls to a REST server in a page using AngularJS.

The first call gets the details of a product, which itself contains the IDs of other products.

I want to render the details of this product, but I also need each of the dependent products to be queried in the back and, and to display some of the details of each on the same page, divided up by category.

The template code is below

<div class="span6">
    <div class="well">
        <h2>product details</h2>
    </div>
    <div class="well">
        <h3>{{device.product.brand}} {{device.product.model}}</h3>
        <p>SKU: {{device.product.sku}}</p>

        <div ng-repeat="reltype in ['plan', 'insurance', 'dataallowance']">
            <h3>{{reltype}}</h3>
            <ul>
                <li ng-repeat="rel in relationships | filter: {type:reltype}">
                    <a href="#/product/{{rel.relId}}">{{plan.type}} {{plan.family}}</a>
                    <p> {{plan.marketingMessage}}</p>
                </li>
            </ul>
        </div>
    </div>
</div>

my app.js:

angular.module('prodcat', ['prodcatServices']).

    config(['$routeProvider', function($routeProvider, $locationProvider) {

        $routeProvider.
            when('/products', {templateUrl: '/prodCatVisualiser/partials/device-list.html', controller: ProductListCtrl}).
            when('/product/:id', {templateUrl: '/prodCatVisualiser/partials/device-detail.html', controller: ProductDetailCtrl}).
            otherwise({redirectTo: '/products'});

    }]);

services.js:

angular.module('prodcatServices', ['ngResource']).

    factory('Devices', function($resource) {

        return $resource('/prodCatVisualiser/ajax/products');

    })
    .factory('Device', function($resource){

        return $resource('/prodCatVisualiser/ajax/product/:id');

    });

and controllers.js:

"use strict";

function ProductListCtrl($scope,Devices) {
    $scope.devices = Devices.query();
}

function ProductDetailCtrl($scope, $routeParams, Device) {
    $scope.device = Device.get({id: $routeParams.id});
}

I've tried changing the productDetailCtrl method to something like this:

function ProductDetailCtrl($scope, $routeParams, Device) {
    var plans = new Array();
    $scope.device = Device.get({id: $routeParams.id}, function($scope, plans) {
        var relationships = $scope.product.relationships;
        for (var i=0; i < relationships.length; i++) {
            var planDetail = Device.get({id: relationships[i].relId}, function($scope, plans){
                plans.push(planDetail);
            });
        }
    });
    $scope.relationships = plans;
}

but to no avail. I can't seem to get my head around the asynchronicity of the secondary service calls as a result of the first call.

so is the controller (and a single function within) the best place to make all the service calls and put them together?

or is it better for the template to use controllers or services to make the extra back-end calls when I iterate over the dependent products? this seems to go against the usual MVC paradigm of the controller putting together the model and then passing it onto the view to be rendered. but Angular is MVC with an asynchronous slant, so maybe not!

Answer 1

I would handle this in the service. Something along the lines of:

.factory('Device', function($resource){
    var device = $resource('/prodCatVisualiser/ajax/product/:id');
    for (var rel in device.relationships) {
         rel.data = $resource(/prodCatVisualiser/ajax/product/:id).get({id: rel.relId});
    }
    return device;
});

(warning - off the cuff code, probably contains an error somewhere, I haven't had coffee yet...consider as pseudocode)

Now what your controller receives will go through three states:

1. A promise of the main product data
2. A fulfilled promise for the main product data, containing pending promises for each of the relationship products.
3. A completely fulfilled promise with data for all of the products needing to be displayed.

Far from breaking MVC, this supports it. The view has no need to know that it takes more than one server call to retrieve this information. It really gets down to what you consider to be the 'real' controller in this scenario. In this layout, it's the service's job to retrieve the relevant model, and everyone downstream of that just needs to worry about what to do with it.