javascript - example - observables angular 5

AngularJS: accede a los datos almacenados en una fábrica después de una llamada $ http

Question

Estoy intentando construir una fábrica que sirva como área de preparación para mis modelos de bases de datos, así como una API para realizar llamadas básicas CRUD. Quiero poder acceder a los datos almacenándolos en un servicio o en una fábrica, y mantener los métodos de API junto con ellos para poder realizar acciones como estas en el controlador.

$scope.folders = Folders.data(); // for a factory
$scope.folders = Folders.data; // for a Service
Folders.create({name: "My Stuff, $oid: { 5fwewe033333 }, user_id: CurrentUser.id"});

Actualmente estoy usando la fábrica de carpetas así en el controlador.

Folders.foldersData().success( function(data, status) {
$scope.folder = data;
})
.error( function(data,status) {
Flash.warning("There was a problem fetching your data");
});

Sé que puedo hacer que se resuelva una promesa en el controlador, pero con el tamaño del proyecto en el que estoy trabajando, me gusta la idea de acceder al modelo de Carpetas en un servicio, sin tener que hacer una llamada al servidor para sincronizar el datos cada vez que hago un cambio.

angular.module(''cmsApp'')
.factory(''Folders'', function($http, $q){
var folders = {};
var messageWarn = "Upload Retrival Failed.";
return {
get: function(){
var defered = $q.defer();
$http.get(''/folders'').success( function ( data, status ) {
defered.resolve(data);
})
.error( function ( data, status ) {
defered.reject();
Flash.warning(message_warn);
});
defered.promise.then( function (promise)
folders = promise;
});
},
data: function (){
return folders;
},
}
});

Mi problema es que no puedo mantener el objeto de carpetas para persistir después de llamar a Folders.get (). Siempre regresa después de llamar a Folders.data () como un objeto vacío.

¿Hay alguna manera de mantener estos datos almacenados en la fábrica como una representación actualizada del modelo de carpeta que no depende de presionar el servidor cada vez?

Ejecutando angular 1.2.3, en una API de Rails 4.

Answer 1

Puede almacenar la promesa en el servicio como un objeto en el servicio. Bifurqué la demostración ampliada anterior para demostrar http://plnkr.co/edit/2HqQAiD33myyfVP4DWg3?p=preview

Al igual que en los ejemplos anteriores, la llamada http solo se realiza una vez, pero esta vez la promesa se agrega al elemento de carpetas en el objeto de servicio que se crea por la fábrica.

app.factory(''myService'', function($http, $q) {
return {
myObject: '''',
get: function() {
// Create the deffered object
var deferred = $q.defer();
if(!this.myObject) {
// Request has not been made, so make it
$http.get(''my-file.json'').then(function(resp) {
console.log(''Making the call!'');
deferred.resolve(resp.data);
});
// Add the promise to myObject
this.myObject = deferred.promise;
}
// Return the myObject stored on the service
return this.myObject;
}
};
});

Answer 2

En este ejemplo, el servicio esencialmente ES los datos. La primera vez que se inyecta el servicio, se crea una promesa y la llamada se apaga. El servicio es realmente la promesa de esa información, pero cuando vuelve la llamada, la promesa se resuelve con los datos. Entonces, la segunda, tercera, etc. vez que se inyecta el servicio, la llamada no se vuelve a hacer: la fábrica ya hizo su trabajo y devolvió el servicio (la promesa en este ejemplo).

Demostración en vivo (click).

var app = angular.module(''myApp'', []);
app.controller(''myCtrl'', function($scope, myService) {
myService.then(function(data) {
$scope.data = data
})
});
app.factory(''myService'', function($http, $q) {
//this runs the first time the service is injected
//this creates the service
var promise = $http.get(''my-file.json'').then(function(resp) {
return resp.data;
});
return promise;
});

Aquí hay una demostración ampliada en la que utilizo los datos dos veces. Tenga en cuenta el registro de la consola: la llamada solo se realiza una vez. En esta demostración, convertí el servicio en un objeto con un método get que devuelve la promesa. Solo quería demostrar otra forma en que esta técnica podría implementarse.

app.factory(''myService'', function($http, $q) {
console.log(''Making the call!'');
var promise = $http.get(''my-file.json'').then(function(resp) {
return resp.data;
});
var myService = {
get: function() {
return promise;
}
};
return myService;
});