get status rest angularjs

[microinfo]

services.factory('UsersFactory', function ($resource) {
return $resource('url/users', {}, {
query: { method: 'GET', isArray: true }
})
});
app.controller('UserCreationCtrl', ['$scope', 'UsersFactory', '$location',
function ($scope, UsersFactory, $location) {

$scope.createNewUser = function () {
UsersFactory.create($scope.user);
}
}]);

Tramite un servizio rest mi scarico la lista di utenti in formato json e la stampo a video. Vorrei sapere come posso recuperare lo status di risposta della richiesta per sapere se è andata a buon fine o meno. Ho creato un json con campo stato (0 o 1) e descrizione.
Grazie

[71106]

Secondo me $resource introduce piu' difficolta' che altro, con $http hai una Promise e quindi e' facilissimo:

$http.get('url').then(function (response) {
  // OK, i dati sono in response.data
}).catch(function () {
  // errore
});

[71106]

Inoltre ti consiglio di eliminare il campo di status dal formato JSON, e' un antipattern. Se il server deve restituire un errore faglielo restituire tramite HTTP status, altrimenti restituisci direttamente i dati JSON.

Tieni presente che un file JSON non deve necessariamente essere un oggetto. Array, numeri, stringhe, e altri valori semplici sono di per se' valori JSON validi.

[microinfo]

quindi in pratica come dovrei modificare il mio service senza stravolgere il codice?
per il codice di errore non ho capito bene come fare, io dovrei caricare una tabella con il json ricevuto, se c'è un errore avrei pensato di lanciare un alert con l'errore...

[71106]

Originariamente inviato da microinfo

quindi in pratica come dovrei modificare il mio service senza stravolgere il codice?

Boh.

per il codice di errore non ho capito bene come fare, io dovrei caricare una tabella con il json ricevuto, se c'è un errore avrei pensato di lanciare un alert con l'errore...

L'alert va mostrato alla quarta riga del mio snippet di cui sopra:

$http.get('url').then(function (response) {
  // OK, i dati sono in response.data
}).catch(function (response) {
  alert(response.statusText);
});

[microinfo]

ok, volendo testare $http sulla get, ovvero il servizio che mi scarica i dati per popolare la tabella html, cambio da cosi':
(mi sto basando su un esempio preso in rete funzionante)
file controller.js

app.controller('UserListCtrl', ['$scope', 'UsersFactory', '$location',
function ($scope, UsersFactory, $location) {

$scope.users = UsersFactory.query(); //chiama nel service.js il return $resource
}]);

in:


app.controller('UserListCtrl', ['$scope', 'UsersFactory', '$location',
function ($scope, UsersFactory, $location, $http) {

$scope.users = function(){
$http.get('url').then(function (response) {
return response.data; //mi aspetto che nello scope users avrò il json su cui applicare ng-repeat per popolare la tabella
}).catch(function (response) {
alert(response.statusText);
});
}]);

ho provato a cambiare in questo modo, ma la tabella non si carica con i dati e dalla console del browser non vedo errori.
Dove sbaglio?

[71106]

Prova così:

app.controller('UserListCtrl', function ($scope, $http) {
  $http.get('url').then(function (response) {
    $scope.users = response.data;
  }).catch(function (response) {
    alert(response.statusText);
  });
});

Una nota interessante: ciò che da (presumo) inesperto hai cercato di fare, ossia assegnare una Promise a un campo dello scope, non è del tutto aberrato, ma ha un suo senso. Le promise sono ancora una tecnologia giovane, ma in EcmaScript 7 sarà possibile fare cose di questo genere:

app.controller('UserListCtrl', function ($scope, $http) {
  try {
    $scope.users = (await $http.get('url')).data;
  } catch (response) {
    alert(response.statusText);
  }
});

Che però sarebbe sconsigliabile per altri motivi (renderebbe sincrono il flusso di esecuzione del costruttore del controller, ergo bloccherebbe il caricamento della pagina finchè la richiesta HTTP non viene conclusa).

[microinfo]

in app.controller però in realtà ho anche altre funzioni, tipo questa:

// callback for ng-click 'createUser':
$scope.createNewUser = function () {
$location.path('/user-creation');
};

in questo codice come l'aggiungo?
app.controller('UserListCtrl', function ($scope, $http) {
$http.get('url').then(function (response) {
$scope.users = response.data;
}).catch(function (response) {
alert(response.statusText);
});
});

devo per forza creare $scope.users = function(){ no?

[microinfo]

ho risolto, il problema era l'url:
$scope.utenti = function(){
$http({
method: 'GET',
url: 'url'
}).then(function successCallback(response) {
$scope.lista = response.data;
}, function errorCallback(response) {
//alert("errore");
//alert(response.status);
alert(JSON.stringify(response, null, 4));
})
//$scope.lista =MacrosFactory.query();
};


$scope.utenti(); //viene lanciata per caricare la fx

ok, adesso ho alcuni dubbi:
1) e se volessi passare un parametro nell'url, per generare una get filtrata?
ho aggiunto un textbox con pulsante, come posso passarlo alla funzione per accodarlo all'url?
2)nella errorCallback e nella successCallback vorrei visualizzare un alert carino tipo bootstrap alert success e danger, come posso fare? dovrei innescare un div e poi nasconderlo?

[71106]

Originariamente inviato da microinfo

devo per forza creare $scope.users = function(){ no?

No, anzi, non devi crearla. Non insozzare lo scope con elementi che non usi nel markup. Lo scope serve solo a rendere degli elementi visibili alle espressioni interpolate nel markup.

Originariamente inviato da microinfo

ho risolto, il problema era l'url: [...]

Questo:

$http({
  method: 'GET',
  url: 'url',
})

e' esattamente equivalente a questo:

$http.get('url')

1) e se volessi passare un parametro nell'url, per generare una get filtrata?
ho aggiunto un textbox con pulsante, come posso passarlo alla funzione per accodarlo all'url?

Qual e' il problema? l'URL e' una stringa, la generi a piacere.

Cosa ti impedisce di fare ad esempio cosi':

$http.get('users/' + id)

?

2)nella errorCallback e nella successCallback vorrei visualizzare un alert carino tipo bootstrap alert success e danger, come posso fare? dovrei innescare un div e poi nasconderlo?

Non usare i componenti JavaScript di Bootstrap perche' con Angular non funzionano. Usa invece AngularUI Bootstrap.

Qui ci sono gli esempi di come usare le modals: https://angular-ui.github.io/bootstrap/#/modal

E qui gli alert: https://angular-ui.github.io/bootstrap/#/alert

[microinfo]

si ma +id non posso metterlo a mano, volevo sapere come passarglielo a partire dalla form html della pagina...

[71106]

Originariamente inviato da microinfo

si ma +id non posso metterlo a mano, volevo sapere come passarglielo a partire dalla form html della pagina...

Binda il controllo a un campo dello scope tramite ng-model come faresti normalmente. Usa la "dot rule" per evitare problemi.

[microinfo]

umm non so come fare perchè la tabella viene caricata dalla:
$scope.utenti(); (vedi sopra)
quando viene lanciato il controller.
poi nella pagina html carico la tabella con ng-repeat su utenti

per fare come dici dovrei passare un parametro alla fx utenti(codice) ma poi non so come lanciarlo :s

[71106]

Markup:

<form>
  <input type="text" ng-model="id"/>
  <button ng-click="update()">Aggiorna</button>
</form>
<div ng-repeat="user in users track by $index">{{user}}</div>

Controller:

app.controller('UserListController', function ($scope, $http) {
  $scope.update = function () {
    delete $scope.users;
    $http.get('users/' + id).then(function (response) {
      $scope.users = response.data;
    });
  };
});

[microinfo]

ok grazie
ancora un altro dubbio, ho messo un pulsantino vicino ogni riga della tabella che al click mi apre una pagina per update della riga.
La pagina viene cambiata con $routeprovider, ma vorrei che i campi della tabella(3) vengano popolati nella finestra di edit.
Come posso riempire i 3 inputbox con i campi della riga selezionata?
Ho pensato che cambiando pagina perdo lo scope è vero?
Forse devo creare le modali?

[71106]

Il router di Angular cambia l'URL ma non la pagina. Le app in AngularJS sono a pagina singola. Non so come stai implementando il tutto ma non dovresti perdere lo scope.

Mettere l'interfaccia di modifica in una modal di AngularUI e' una cosa che puoi sicuramente fare e non escluse l'uso del router, cioe' puoi fare in modo che il router associ un URL alla modal.

Piccola correzione riguardo al markup del mio post precedente: per gestire il click del bottone ho usato ng-click su un elemento <button>, ma in realta' e' molto meglio usare ng-submit sulla form, cosi':

<form ng-submit="update()">
  <input type="text" ng-model="id"/>
  <input type="submit" value="Aggiorna"/>
</form>

[microinfo]

si infatti al centro della pagina principale apro la griglia con la tabella, poi cliccando sul pulsante della riga, apro al posto della pagina con la griglia, la pagina di updata.

adesso come faccio a popolare i capi tipo :
<input type="text" style="min-width: 100%" class="form-control" id="inputCodice" placeholder="Inserisci il codice (Obbligatorio)" ng-model="macro.macro_entity_code"/>


con il codice della righa che ho cliccato?
e il riferimento alla specifica riga come lo prendo?

[71106]

Il metodo open delle modal (vedi documentazione) ti permette di specificare un oggetto di opzioni e tra le varie opzioni e' possibile specificare uno scope. Specifica lo scope associato alla riga della tabella e assicurati che contenga un qualche riferimento ai dati della riga cliccata.

[microinfo]

per quanti riguarda l'utilizzo delle modali, ho creato:
$scope.openEditModal = function() {
alert("entro il modal");
var modalInstance = $modal.open({
templateUrl: 'pag/upd_record_utente.html',
//controller: 'UserListCtrl',
resolve: {
items: function () {
return $scope.items;
}
}
})
};

ma quando la chiama con ng-click=openEditModal() mi dice che open non è definito, per quale motivo?

Altrimenti trono ad usare il routeprovider e cambiare pagina, ma resta da capire come portarsi lo scope da caricare nella pagina

[71106]

Cos'e' "$modal"?

Il metodo e' presente nel servizio $uibModal che devi iniettare tramite dependency injection. Qua c'e' il Plunker dell'esempio riportato dalla documentazione: https://plnkr.co/edit/NeX82nSM84n3VH6jPlvr?p=preview

$uibModal e' iniettato alla seconda riga di example.js.