récupération données avec angular JS
Salut, je fais un api ( http://localhost/pfe/web/app_dev.php/api/users ) qui récuperer tous les actualités qui existe dans la base de données en localhost , maintenant je travaille avec framework ionic qui basé sur Angular JS, je fais récupérer les données et j'affiche tous les actualités mais je trouve un probléme quand permet de parcourir acutalité a partir d'id c'est a dire affiche chaque actualite dans un page
voici vode controller pour récupérer tous les acutalités
app.controller("getactualites",function($scope,$http,$stateParams){
$http.get('http://localhost/pfe/web/app_dev.php/api/users')
.then(function successCallback( response ) {
$scope.data = response;
}, function errorCallback(response) {
console.log(response);
alert('error');
})
});
code controller pour récupérer chaque actualité par son id :
app.controller("infoActualiteCtrl",function($scope,$http,$stateParams){
$http.get('http://localhost/pfe/web/app_dev.php/api/users/users.id')
.then(function successCallback( response ) {
$scope.data = response;
}, function errorCallback(response) {
console.log(response);
alert('error');
})
});mais la probléme qui je trouve est :
http://localhost/pfe/web/app_dev.php/api/users/users.id 404 (Not Found)
comment récupérer chaque actualité avec son id !? et merci d'avance
9 réponses
Bonjour,
c'est normal que ton $scope.id soit indéfini.
Dans ta function app.config :
$stateProvider.state("infoActualite",{
url : "/infoAlite/:id", // tu rajoutes le paramètre id
templateUrl : "templates/infoActualite.html",
controller:"infoActualiteCtrl"
});Ensuite, au niveau de ton controller, tu récupère l'id de ton enregistrement grâce au paramètre $stateParams.id (doc)
Salut,
Pourrais-tu s'il-te-plait être plus explicite ? Ton sujet n'est pas très compréhensible.
Merci.
Je ne sais pas trop... mais ..```
$http.get('http://localhost/pfe/web/app_dev.php/api/users/users.id')
doit resevoir en paramètre l'id de l'article dont tu veux récupérer le contenu .. c'est tous . genre ```
$http.get('http://localhost/pfe/web/app_dev.php/api/users/'+ $scope.id)@Bienfoali
voire ce problémé
http://localhost/pfe/web/app_dev.php/api/users/undefined 404 (Not Found@Bienfoali
code controller :
app.controller("infoActualiteCtrl",function($scope,$http,$stateParams){
$http.get('http://localhost/pfe/web/app_dev.php/api/users/'+$scope.id)
.then(function successCallback( response ) {
$scope.data = response;
}, function errorCallback(response) {
console.log(response);
alert('error');
})
});Bonjour med001 Si tu as 2 minutes je peux surement t'aider via skype je pense que cela sera beaucoup plus simple je suis dispo tout de suite si tu veux envoie moi ton id et je te contacte
@YannTouil , Je n'ai pas Skype
voici tous le code du mon app mobile
code controller :
app.config(function($stateProvider,$urlRouterProvider){
$stateProvider.state("actualite",{
url : "/actualite",
templateUrl : "templates/actualite.html",
controller:"getactualites"
});
$stateProvider.state("infoActualite",{
url : "/infoAlite",
templateUrl : "templates/infoActualite.html",
controller:"infoActualiteCtrl"
});
$stateProvider.state("contact",{
url : "/contact",
templateUrl : "templates/contact.html"
});
//pour afficher page index
$urlRouterProvider.otherwise("actualite");
})
app.controller("getactualites",function($scope,$http,$stateParams){
$http.get('http://localhost/pfe/web/app_dev.php/api/users')
.then(function successCallback( response ) {
$scope.data = response;
}, function errorCallback(response) {
console.log(response);
alert('error');
})
});
app.controller("infoActualiteCtrl",function($scope,$http,$stateParams){
$http.get('http://localhost/pfe/web/app_dev.php/api/users/'+ $scope.id)
.then(function successCallback( response ) {
$scope.data = response;
}, function errorCallback(response) {
console.log(response);
alert('error');
})
});
code index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" >
<meta http-equiv="Content-Security-Policy" content="default-src *; img-src 'self' data: *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src 'self' 'unsafe-inline' *">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="lib/ngstorage/ngStorage.min.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="phonegp">
<div class="tabs tabs-icon-top">
<a class="foo tab-item" ui-sref="actualite">
<i class="icon ion-document-text" ></i>
<span> Actualité </span>
</a>
<a class="foo tab-item" ui-sref="contact">
<i class="icon ion-star"></i>
Contact
</a>
</div>
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class="bar-energized">
<ion-nav-back-button></ion-nav-back-button>
<ion-nav-buttons>
<button menu-toggle="left" class="button button-icon ion-navicon"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view>
</ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-item menu-close ui-sref="actualite">Actualite</ion-item>
<ion-item menu-close ui-sref="contact">Contact</ion-item>
</ion-side-menu>
</ion-side-menus>
</body>
</html>
code actualite.html
<link href="css/style.css" rel="stylesheet">
<ion-view view-title="Actualité">
<ion-content class=" padding" ng-controller="getactualites">
<div class="list" ng-repeat="allUsers in data ">
<div class="card" ng-repeat="user in allUsers.users | orderBy:'-id' ">
<div class="item item-divider">
{{user.nomactualite}}
</div>
<div class="item item-text-wrap">
{{user.contenuactualite}}
</div>
</div>
</div>
</ion-content>
</ion-view>
code contact.html
<link href="css/style.css" rel="stylesheet">
<ion-view view-title="Contact">
<ion-content style="background-color: #eeeeee;">
<div class=" image">
<img src="img/cab.jpg" alt="CAB" >
</div>
<div class=" contact">
<h5> Club Athlétique Bizertin : Association Omni Sport fondée le 12 juillet 1928</h5>
<h5> Siège Social : Avenue Hédi Chaker 7000 Bizerte</h5>
<h5> Email : webmaster@cab-officiel.com</h5>
<h5> Pour les journalistes, veuillez envoyer vos questions à cette adresse : presse@cab-officiel.com</h5>
<h5> Tél : +216 72 424.401</h5>
<h5> Fax : +216 72 425 401</h5>
</div>
<div class="icon">
<a href="https://www.facebook.com/cabofficiel" target="_blank"><img src="img/fb.png" alt="facebook CAB" ></a>
<a href="https://twitter.com/CAB_off" target="_blank"><img src="img/tw.png" alt="twitter CAB" ></a>
<a href="https://www.youtube.com/user/CABofficiel" target="_blank"> <img src="img/ytb.png" alt="youtube CAB" ></a>
</div>
</ion-content>
</ion-view>
code infoActualite.html:
<ion-view view-title="info Actualite">
<ion-content class="padding" ng-controller="getactualites">
<div class="card" ng-repeat="allUsers in data">
<div ng-repeat="user in allUsers.users">
<div class="item item-divider">
{{user.nomactualite}}
</div>
<div class="item item-text-wrap">
{{user.contenuactualite}}
</div>
</div>
</div>
</ion-content>
</ion-view>
aide moi s'il vous plait et merci