Senden eines $ routeParam an den Server durch einen Dienst Angular

Question

Sie müssen mit mir ertragen, weil ich ein Autodidakt Noob bin. Ich habe eine PHP-Seite auf meinem Server, die eine $ _get-Variable benötigt, um die Daten auf der Serverseite und nicht auf dem Client zu sortieren. Ich verwende routeParams in Angular, damit die Variable gesendet werden kann. Dies funktioniert jedoch nur, wenn Sie die Webseite aktualisieren. Bitte kann mir jemand helfen, da mir der Kopf wehtut.

Controller:

app.controller('JuiceController', ['$scope', 'juices', function($scope, juices) { 
     juices.success(function(data){ 
     $scope.juices = data; 
     }); 
    }]); 

Service:

app.factory('juices', ['$http', '$routeParams',function($http, $routeParams) { 
return $http.get('http://madcow-app.dev/application/backend/api/products.php', { 
    params: {prod: $routeParams.prod} 
    }) 
    .success(function(data) { 
     return data; 
    }) 
    .error(function(err){ 
     return err; 
    }); 
    }]); 

HTML-Ausgabe (Saft Ansicht):

<div class="juice-wrap" ng-repeat="juice in juices"> 
<div class="juice-img"><img ng-src="{{ juice.imgpath }}" width="163" height="176" alt=""/></div> 
<div class="juice-rght"> 
    <div class="juice-title">{{ juice.name }}</div> 
    <div class="juice-desc">{{ juice.descrip }}</div> 

Strecke Anbieter

$routeProvider 
.when('/', { 
templateUrl: 'script/views/home.html' 
}) 
.when('/categories/', { 
controller: 'CatController', 
templateUrl: 'script/views/categories.html' 
}) 
.when('/juice/:prod', { 
controller: 'JuiceController', 
templateUrl: 'script/views/juice.html' 
}) 
.when('/events/', { 
controller: 'EventController', 
templateUrl: 'script/views/events.html' 
}) 
.when('/qr/', { 
templateUrl: 'script/views/qr.html' 
}) 
.when('/feedback/', { 
templateUrl: 'script/views/feedback.html' 
}) 
.otherwise({ 
redirectTo: '/' 

php Funktionsausgänge json (dies wird unten mit dem PHP-Controller ausgegeben wird, und nimmt die Kategorie ID als Variable :)

return json_encode($results); 

mit dem PHP-Controller (das ist die Seite, die der Winkel Service/Fabrik zieht die json Palette von Produkten aus:

<?php 
    include "../../init.php"; 
    if (isset($_GET['prod'])) 
    { 
    echo $MC->Api->getProductsApi($_GET['prod']); 
    } 
    else 
    { 
    echo 'error'; 
    } 

Dies ist die Kategorie html:

<div class="cat-btn" ng-repeat="cat in cats"> 
<a href="#/juice/{{cat.catid}}"> 
    <img ng-src="{{ cat.imgpath }}" width="363" height="195" alt=""/> 
    <div class="cat-btn-text"> {{ cat.name }} </div> 
</a> 

Grundsätzlich möchte ich erreichen, wenn ein Benutzer auf eine Kategorie im Frontend, eckige Routen zur Produktansicht mit der Kategorie ID als Filter für die PHP-Funktion klickt, um die Json-Ausgabe mit nur den Säften in dieser Kategorie zu füllen.

Ich bin mir nicht sicher ob ich es so machen sollte, oder ob ich es aus einem anderen Winkel treffen muss. Bitte bedenken Sie, dass ich ein komplettes Javascript noob bin und Laien wären großartig für die Antwort.

Vielen Dank im Voraus .....

Answer 1

Factory:

app.factory('juices', [ 
    '$http', '$routeParams', function ($http, $routeParams) { 
     var self = this; 

     function getJuices() { 
      $http.get('http://madcow-app.dev/application/backend/api/products.php', { 
       params: {prod: $routeParams.prod} 
       }) 
       .success(function (data) { 
        self.juices = data.data; 
       }) 
       .error(function (err) { 

       }); 
     } 

     return { 
      getJuices: getJuices, 
      juices: self.juices 
     } 
    } 
]); 

Controller:

app.controller('JuiceController', [ 
    '$scope', 'juices', function ($scope, juices) { 
     juices.getJuices(); 
     $scope.$watch(function() { 
      return juices.juices 
     }, function (newJuices, oldJuices) { 
      // This is triggered when juices.juices changes 
      // newJuices containes the juices retrieved from server 
      // This is needed because it is asynchronous 
     }); 
    } 
]);