Discussion :

[dukoid]

Bonjour les amis,

j'apprends AngularJS, mon site tourne mais je remarque un problème de rafraîchissement de la nouvelle page. (ça le fait parfois)

voici les étapes :
1) je clique sur une nouvelle page

2) récupération données via API REST

loading est activé (affichage du spinner)

3)
quelques ms plus tard :
le loading se désactive

juste après, je vois rapidement l'ancienne page être remplacé par la nouvelle page.


conclusion :
je trouve ça, assez désagréable à voir.
je voudrais que l'ancienne page soit remplacée par la nouvelle durant que le loading est activé.[/B]


controller :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
    Product.getAll()
        .then(function() {
            this.products = Product.products;
            $rootScope.loading = false;
        }.bind(this));

factory:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
    Product.getAll = function() {
        return $http.get('http://apirest-no.fr/api/v1/produits')
            .success(function(data) {
                Product.products = data;
            });
    };

quelle solution ?

[Marco46]

Fais un plunkr stp.

[dukoid]

je n'ai pas de plunker.
mais d'après votre expérience, vous connaissez ce problème ou pas ?

[Invité]

une idée comme ça ...peut être mettre un ng-show sur ta div qui montre ta div seulement quand ton service envoie les vars?
Après je ne sais pas... Peut être un pb de routing angularjs ?

l'avantage du 2 way binding est précisemment qu'il évite le problème que tu as ... Alors bizarre ton problème, c'est dans le HTML que le pb doit se situer ...

[dukoid]

j'ai pourtant le problème.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
$rootScope.loading = true;                          // (1)  active spinner d'attente
 
Product.getAll()
        .then(function() {
            this.products = Product.products;    // (2)   récupère les données API REST
            $rootScope.loading = false;           // (3)   desactive le spinner
        }.bind(this));                                   //(4)    met à jour le rendu

déjà, ce bout de code je l'ai pris de divers tutos et ils font tous ainsi.

ce que je comprends pas, c'est entre le (3) et (4) . le spinner est desactivé avant le rendu d'ou mon problème, non ?

[Invité]

Heu bizarre ton bind, voici mes requêtes $http avec angular JS, il n'y a pas de bind a faire, le dirty cheking fait tout tout seul, même dans les graphiques ou n'importe quel truc JSON :

Voici un exemple de requête $http :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
$http.get('crud.php?action=get_intervenants').success(function(data){
	$scope.intervenants = data;
}).error(function(data){ $scope.infos = " Pas de données ou pb de connexion"});

ou alors, vu que tu utilises un service, voici un exemple de ce que j'ai :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
/* CHARGE LES CATEGORIES DEMPLOYES POUR LE SELECT CATEGORIES*/
	$scope.categEmployes = categoriesService.getCategories();

Qui pointe sur ma factory :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
app.factory('categoriesService', ['$firebaseArray', 'FIREBASE_URI', function ($firebaseArray, FIREBASE_URI) {
 
	var ref = new Firebase(FIREBASE_URI);
	var categories = $firebaseArray(ref.child('categEmployes'));
 
 
    var getCategories = function () {
        return categories;
    };
 
    var ajouterCategorie = function (categorie) {
        categories.$add(categorie);
    };
 
    var majCategorie = function (id) {
        categories.$save(id);
    };
 
    var supprimerCategorie = function (id) {
        categories.$remove(id);
    };
 
	return {
        getCategories: 		getCategories,
        ajouterCategorie: 	ajouterCategorie,
        majCategorie:		majCategorie,
        supprimerCategorie: supprimerCategorie
 
    }
}])

Ah ok tu utilises la syntaxe this... bah là désolé je peux rien pour toi, j'utilise pas cette syntaxe, par ce que je trouve cela plus difficile à comprendre(Enfin c'est juste mon avis personnel).

Je ne vois pas ce qu'un bind vient faire là, alors que tu as déjà la ligne this.products = Product.products; qui est censée mettre la vue à jour, je ne vois pas pourquoi il faut encore ajouter un bind .. .
Voilà pourquoi je n'utilise jamais la syntaxe this... A moins que t'es sur angular 2 ?