2014-06-09 17 views
7

ho definito un servizio personalizzato http in angolare che assomiglia a questo:

angular.module('myApp') 
    .factory('myhttpserv', function ($http) { 

    var url = "http://my.ip.address/" 

    var http = { 
     async: function (webService) { 
      var promise = $http.get(url + webService, { cache: true }).then(function (response) { 
      return response.data; 
     }); 
      return promise; 
     } 
    }; 
    return http; 
}); 

E posso accedere a questo servizio nel mio controller in questo modo:

Tuttavia ora è necessario semplificare questo processo in modo che sia TUTTO contenuto nel servizio con un URL statico e restituisca semplicemente i dati. In modo che posso solo chiamare nel controller in questo modo:

angular.module('myApp') 
    .controller('myCtrl', function ($scope, myhttpserv) { 

     console.log(myhttpserv.var1); 
     console.log(myhttpserv.var2); 
     etc... 

}); 

non riesco a modificare il servizio per ottenere questa funzionalità. Qualcuno sa il modo corretto per farlo?

risposta

14

Opzione 1 - Utilizzare promessa API

angular.module('myApp').factory('myhttpserv', function ($http) { 
    return $http.get('http://my.ip.address/getUser?u=3', { cache: true }); 
}); 

Controller:

angular.module('myApp').controller('myCtrl', function ($scope, myhttpserv) { 
    myhttpserv.then(function(response){ 
     console.log(response.data); 
    });  
}); 

Opzione 2 - Utilizzando percorso determinazione

angular.module('myApp', ['ngRoute']).config(['$routeProvider', 
    function($routeProvider) { 
    $routeProvider. 
     when('/myCtrl', { 
     templateUrl: 'myView.html', 
     controller: 'myCtrl', 
     resolve: { 
     load: function (myhttpserv) { 
      return myhttpserv; 
     } 
     }); 
    }]); 

Servizio:

angular.module('myApp').factory('myhttpserv', function ($http) { 
     var data = {}; 
     var url = "http://my.ip.address/"; 
     var promise = $http.get(url + 'getUser?u=3', { cache: true }).then(function (response) { 
       data = response.data; 
      }); 
     return data; 
    }); 

Controller:

angular.module('myApp') 
    .controller('myCtrl', function ($scope, myhttpserv) { 

     console.log(myhttpserv.data.var1); 
     console.log(myhttpserv.data.var1); 
     etc... 

}); 

Opzione 3 - intervallo di servizio Usa $

angular.module('myApp').factory('myhttpserv', function ($http) { 
    var data = {}; 
    var url = "http://my.ip.address/"; 
    var promise = $http.get(url + 'getUser?u=3', { cache: true }).then(function (response) { 
      data = response.data; 
     }); 
    return data; 
}); 

Controller:

0.123.
angular.module('myApp').controller('myCtrl', function ($scope, $interval, myhttpserv) { 
     $scope.intervalPromise = $interval(function(){ 
      if (Object.keys(myhttpserv.data).length!=0) 
      { 
       console.log(myhttpserv.data); 
       $interval.cancel($scope.intervalPromise); 
      } 
     }, 100);  
}); 
+0

Quindi non posso semplicemente ottenere il servizio per restituire un oggetto quando la chiamata http è finita e accedere a quell'oggetto dal mio controller su una riga? – AzzyDude

+0

Devi usare promise.then o usare un intervallo per questo poiché non sappiamo quando verrà restituita la chiamata ajax. Se si utilizza il router angolare, è inoltre possibile configurare il routing e il controller caricare solo quando vengono risolte le promesse specificate (richieste ajax) –

+0

È possibile integrare "promise.then" nella risposta in modo che il controller carichi solo quando il richiesta è stata risolta? – AzzyDude