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