AngularJS problème de rafraichissement des données
Bonjour, débutant en Angular, je suis bloqué a un point de mon code, je voudrais récupérer le contenue de mes articles qui sont des fichier json générer automatiquement par drupal.
je suis actuellement en local pour mes test mais aussi pour apprendre Angular.
Mon problème se situe au niveau de la récupération :
j'ai un fichier global json qui regroupe tout les articles et dont le contenue pointe vers un autre json qui est propre a l'article.
Du coup je récupère bien le contenue voulu mais lorsque je click sur un autre lien, rien ne s'actualise et il ne me récupère rien malgré la création d'un nouveau scope mais dont le contenue est vide.
voici mon code :
mon module angular principal :
<!-- Script JS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<script src="http://code.angularjs.org/1.2.14/angular-sanitize.js"></script>
<script src="http://code.angularjs.org/1.2.14/angular-route.js"></script>
<script src="http://code.angularjs.org/1.2.14/angular-resource.js"></script>
<script>
// mon module app contient les module de Route et de Sanitize
var app = angular.module('app', 'ngSanitize', 'ngRoute', 'ngResource'])
// systeme de routing
app.config(function($routeProvider){
$routeProvider
.when('/home', {templateUrl: 'partials/home.html', controller: 'contentsCtrl'})
.when('/test/:nid', {templateUrl: 'partials/test.html', controller: 'contentsCtrl'})
.otherwise({redirectTo : '/'});
})
app.factory('ContentFactory', function($http, $q){
var factory = {
contents : false,
resource : $http.jsonp('http://achahada.fr/json/articles/node.jsonp?callback=JSON_CALLBACK'),//objet recourse qui me permettra de changer la source de mon json en fonction de l'id demander
getContents : function(){
var deferred = $q.defer();
factory.resource
.success(function(data, status){
factory.contents = data;
deferred.resolve(factory.contents);
})
.error(function(data, status){
deferred.reject('Impossible de récupérer les articles');
});
return deferred.promise;
},
getContent : function(nid){
var content = {};
var deferred = $q.defer();
angular.forEach(factory.contents, function(value, key){
if(value.nid == nid){
//si il y a un nid alors la source de mon content sera le fichier json assortie a celui-ci
factory.resource = $http.jsonp('http://achahada.fr/json/articles/node/'+nid+'.jsonp?callback=JSON_CALLBACK');
factory.resource
.success(function(data, status){
factory.contents = data;
deferred.resolve(factory.contents);
})
.error(function(data, status){
deferred.reject('Impossible de récupérer les articles');
});
return deferred.promise;
content = value;
}
});
return content;
},
}
return factory;
})
app.controller('contentsCtrl', function ($scope, ContentFactory, $routeParams, $route){
$scope.loading = true; // affichera un message de chargement
var content = ContentFactory.getContent($routeParams.nid);
//$scope.reload = $route.reload();
$scope.contents = ContentFactory.getContents().then(function(contents){
$scope.loading = false; // dès qu'on a finie de charger on arrete le chargement
$scope.contents = contents;
}, function(msg){
alert(msg);
})
});
</script>et ma view partials/test.html
<div class="large-8 columns" id="main-content">
<!-- div de loading -->
<div class="loading" ng-show="loading">Chargement...</div>
<!-- Recuperation de mes contenue de page -->
<h1>{{contents.title}}</h1>
<br><br>
<div ng-bind-html="contents.body.und[0].value">
</div>
</div>et ma page index ou j'ai mes lien
<div class="row">
<div class="large-12 columns latest-articles">
<!-- div de loading -->
<div class="loading" ng-show="loading">Chargement...</div>
<a href="#home">Home</a>
<div ng-controller="contentsCtrl">
<div ng-repeat="content in contents">
<br><a href="#test/{{content.nid}}" ng-click="reload">{{content.title}}</a><br>
</div>
</div>
</div>
</div>j'ai essayé un $route.reload(); le problème c'est qu'il me fait une boucle infinie de get alors que je veut juste rafraichir ma view et qu'il m'affiche les infos demander par rapport a mon lien.
Merci d'avance
2 réponses
Problème résolue enfin j'ai séparé sa en 2 fonctions, et au lieu de réatribuer la source de mes données je lui dis juste d'allé chercher les données la ou le nid pointe même moi j'ai du mal a m'expliqué tellement j'ai rééecris mon code 1 milliard de fois
voici le code pour ceux que sa intéresserait il reste juste a l'optimisé pour quelque performance.
<script>
// mon module app contient les module de Route et de Sanitize
var app = angular.module('app', 'ngSanitize', 'ngRoute'])
// systeme de routing
app.config(function($routeProvider){
$routeProvider
.when('/home', {templateUrl: 'partials/home.html', controller: 'PostsCtrl'})
.when('/test/:nid', {templateUrl: 'partials/test.html', controller: 'ContentsCtrl'})
.otherwise({redirectTo : '/'});
})
app.factory('PostFactory', function($http, $q){
var factory = {
posts : false,
//function getPosts qui nous renverra nos differents articles
getPosts : function(){
var deferred = $q.defer(); // variable qui nous renveras notre promesses
//call de notre fichier json générer par drupal
$http.jsonp('http://achahada.fr/json/articles/node.jsonp?callback=JSON_CALLBACK')
//si nous arrivons a récupérer les articles alors :
.success(function(data, status){
factory.posts = data; // notre objets posts sera égal au fichier json(data)
// et on réenvois les articles
deferred.resolve(factory.posts);//ici je met factory.posts au lieu de data pour qu'il soit stocké en mémoire et si ces information sont redemander il n'y aura pas de rechargement de données
})
// si nous y arrivons pas :
.error(function(data, status){
//on réenvois un message d'erreur
deferred.reject('Impossible de récupérer les articles, ERROR 999');
});
return deferred.promise; // return notre promesses
},// fin de ma function getPosts
//function getContents qui nous renverra nos contenues d'articles
getContents : function(nid){
var deferred = $q.defer();
var content = {};
angular.forEach(factory.posts, function(value, key){
if(value.nid == nid){
$http.jsonp('http://achahada.fr/json/articles/node/'+nid+'.jsonp?callback=JSON_CALLBACK')
.success(function(data, status){
content = data;
deferred.resolve(content);
})
.error(function(data, status){
//on réenvois un message d'erreur
deferred.reject('Impossible de récupérer les articles, ERROR 999');
});
}
});
content = deferred.promise;
return content;
}//fin de ma function getContents
}
return factory;// je retourne mon objet factory
})
// Mon controller PostsCtrl charger de récupérer mes articles
app.controller('PostsCtrl', function ($scope, PostFactory){
$scope.loading = true;//affichage de mon chargement pendants la récupérations des données
$scope.posts = PostFactory.getPosts().then(function(posts){
//si j'ai une promesses positif alors j'envois mes données et je stope le chargement
$scope.loading = false;
$scope.posts = posts;
}), function(msg){ //sinon j'affiche mon message d'erreur
alert(msg);
}
//l'argument then est propre a notre promesse, il fera se qu'il doit faire en fonction de notre promesses retourner, si c'est une error j'affiche mon alert sinon je renvois les données.
})
// Mon controller ContentsCtrl charger de récupérer mes contenue d'articles
app.controller('ContentsCtrl', function ($scope, PostFactory, $routeParams){
$scope.loading = true;//affichage de mon chargement pendants la récupérations des données
$scope.contents = PostFactory.getContents($routeParams.nid).then(function(contents){
//si j'ai une promesses positif alors j'envois mes données et je stope le chargement
$scope.loading = false;
$scope.contents = contents;
}), function(msg){ //sinon j'affiche mon message d'erreur
alert(msg);
}
//l'argument then est propre a notre promesse, il fera se qu'il doit faire en fonction de notre promesses retourner, si c'est une error j'affiche mon alert sinon je renvois les données.
})
</script>Je n'ai pas regardé le tuto sur les services/factory mais en regardant ton code il y a un truc qui ne colle pas à mon sens :
getContent : function(nid){
var content = {};
var deferred = $q.defer();
angular.forEach(factory.contents, function(value, key){
if(value.nid == nid){
//si il y a un nid alors la source de mon content sera le fichier json assortie a celui-ci
factory.resource = $http.jsonp('http://achahada.fr/json/articles/node/'+nid+'.jsonp?callback=JSON_CALLBACK');
factory.resource
.success(function(data, status){
factory.contents = data;
deferred.resolve(factory.contents);
})
.error(function(data, status){
deferred.reject('Impossible de récupérer les articles');
});
return deferred.promise;
content = value; // cette ligne ne peux jamais être appelée par le return
}
});
return content;
},D'une manière générale, return va terminer l'opération (méthode, boucle, ...) donc cela doit être la dernière ligne de ton bout de code.