Geek Answers Handbook

Data for printout page and detail page without 2 API calls

I created a service to return a list of clients from my API. Using the UI router, I can successfully pass the client identifier to the state of details, however there is no need to make another API call to retrieve one client when I have all the necessary data in my controller.

What is the best way to use the identifier in the URL of my verbose state to display data for this client? In addition - if the user views the client’s URL directly, will I need to make an API call to get only the client’s data - or is there a better way?

EDIT: I don't want to load two views on the same page, but completely switch the views here, from the listing page to the details page.

Routes in App.js

$stateProvider
    .state('root', {
        abstract: true,
        url: '',
        views: {
            '@': {
                templateUrl: '../partials/icp_index.html',
                controller: 'AppController as AppCtrl'
            },
            'left-nav@root': {
                templateUrl: '../partials/left-nav.html'
            },
            'right-nav@root': {
                templateUrl: '../partials/right-nav.html'
            },
            'top-toolbar@root': {
                templateUrl: '../partials/toolbar.html'
            }
            /*'footer': {
                templateUrl: '../partials/agency-dashboard.html',
                controller: 'AppController as AppCtrl'
            }*/
        }
    })
    .state('root.clients', {
        url: '/clients',
        views: {
            'content@root': {
                templateUrl: '../partials/clients-index.html',
                controller: 'ClientsController as ClientsCtrl'
            }
        }
    })
    .state('root.clients.detail', {
        url: '/:clientId',
        views: {
            'content@root': {
                templateUrl: '../partials/client-dashboard.html',
                //controller: 'ClientsController as ClientsCtrl'
            }
        }
    })
    // ...other routes

Service, also in app.js

.service('ClientsService', function($http, $q) {
    this.index = function() {
        var deferred = $q.defer();
        $http.get('http://api.icp.sic.com/clients')
            .then(function successCallback(response) {
                console.log(response.data);
                deferred.resolve(response.data);

        },
        function errorCallback(response) {
           // will handle error here 
        });
        return deferred.promise;
    }
})

And my controller code in ClientsController.js

.controller('ClientsController', function(ClientsService) {
    var vm = this;
    ClientsService.index().then(function(clients) {
        vm.clients = clients.data;
    });
});

Finally, my listing page is clients-index.html

<md-list-item ng-repeat="client in ClientsCtrl.clients" ui-sref="clients-detail({clientId : client.id })">
    <div class="list-item-with-md-menu" layout-gt-xs="row">
        <div flex="100" flex-gt-xs="66">
            <p ng-bind="client.name"></p>
        </div>
        <div hide-xs flex="100" flex-gt-xs="33">
            <p ng-bind="client.account_manager"></p>
        </div>
    </div>
</md-list-item>
+4
source share
2 answers

You can use inherited states, such as those suggested here .

$stateProvider
    // States
 .state("main", {
      controller:'mainController',
      url:"/main",
      templateUrl: "main_init.html"
  })  
  .state("main.details", {
      controller:'detailController',
      parent: 'main',
      url:"/:id",
      templateUrl: 'form_details.html'
  })

Your service does not change. The controllers check if the model was received:

app.controller('mainController', function ($scope, ClientsService) {
  var promise = $scope.Model ? $q.when($scope.Model) : ClientsService.index();
  promise.then(function(data){
    $scope.Model = data;
  });
})
app.controller('detailController', function ($q, $scope, ClientsService, $stateParams) {
  var promise = $scope.Model ? $q.when($scope.Model) : ClientsService.index();
  promise.then(function(data){
    $scope.Model = data;
    $scope.Item = data[$stateParams.id];
  });
})

See http://plnkr.co/edit/I4YMopuTat3ggiqCoWbN?p=preview

[] , :

app.controller('mainController', function ($q, $scope, ClientsService, $stateParams) {
  var promise = $scope.Model ? $q.when($scope.Model) : ClientsService.index();
  promise.then(function(data){
    $scope.Model = data;
    $scope.Item = data[$stateParams.id];
  });
})
+3

. $q.when() . , , API , . , . .

.service('ClientsService', function($http, $q) {
    var clients = null;

    this.getClient = function(id) {
        if (clients !== null) {
            return $q.when(id ? clients[id] : clients);
        }

        var deferred = $q.defer();
        $http.get('http://api.icp.sic.com/clients').then(function(response) {
            clients = response.data;
            deferred.resolve(id ? clients[id] : clients);
        }, function (response) {
            // will handle error here
        });

        return deferred.promise;
    }
})
+3

More articles:


All Articles