podłączyć AngularJS do mysql przy użyciu mojej usługi PHP?

Question

Używam AngularJS 1.0, PHP i mysql z localhost na moim Macu.

Mam bardzo prostą bazę danych mysql: "koty". Ma jedną tabelę o nazwie "kocięta". Tabela ma dwie kolumny "id" i "name". W bazie danych znajdują się trzy kocięta o nazwach Larry, Curly i Moe.

Mam teraz prosty kod PHP, który otwiera bazę danych, pobiera trzy rekordy i zwraca je w JSON w następujący sposób: [{"id": "1", "name": "Larry"}, {"id": "2", "name": "Curly"}, {"id": "3", "name": "Moe"}]

Użyłem najnowszego nasienia i konfiguracji kątowej projekt w Eclipse. W app.js napisałem: "użyj ścisłego"; angular.module ('Koty', ['ngResource', 'Cats.filters', 'Cats.services', 'Cats.directives']) Umieściłem mój kod PHP w folderze services i nazwał go "index.php ". Jeśli przejdę do tej usługi/index.php w przeglądarce przy użyciu localhost na Macu, otrzymam powyższy JSON. Jak dotąd wszystko jest w porządku.

Teraz - WSZYSTKO, CO CHCĘ ZROBIĆ (! Słynne ostatnie słowa;) jest połączony z usługą PHP, którą posiadam i wyświetlam zawartość tej tabeli Cats na mojej głównej stronie indeksu przy użyciu mojego projektu AngularJS. Zwykły stary tekst, brak tabel, po prostu połącz się z dostępnym zasobem i wyświetl go.

Próbowałem wszystkich wersji demonstracyjnych w Internecie (wiele z nich jest nieaktualnych). Czy ktoś może pokazać mi prosty, aktualny sposób na zrobienie tego? Dla mojego życia mam różne dema AngularJS, ale żaden z nich nie wykonuje tego prostego zadania w sposób, który mogę zrozumieć.

Z góry dziękuję.

Answer 1

To powinno również zadziałać. To znacznie mniej linii kodu, ale należy pamiętać, że każda manipulacja błąd został usunięty:

function FetchCtrl($scope, $resource) { 
    var services = $resource('../services/index.php'); 
    $scope.data = services.query(); 
} 
FetchCtrl.$inject = ['$scope', '$resource']; 

Normalnie bym używany wbudowany .get() sposobu na $resouce ale Twoja odpowiedź jest w postaci tablicy, która .query() obsługuje domyślnie.

można znaleźć documentation on $resource here

Answer 2

OK. Rozwiązałem to. Po pierwsze, kopiowane i dodaje kontroler znalazłem w jednym z przykładów:

function FetchCtrl($scope, $http, $templateCache) { 
     $scope.method = 'GET'; 
     $scope.url='../services/index.php'; 
     $scope.fetch = function() { 
      $scope.code = null; 
      $scope.response = null; 

      $http({method: $scope.method, url: $scope.url, cache: $templateCache}). 
      success(function(data, status) { 
       $scope.status = status; 
       $scope.data = data; 
      }). 
      error(function(data, status) { 
       $scope.data = data || "Request failed"; 
       $scope.status = status; 
      }); 
     }; 

     $scope.updateModel = function(method, url) { 
      $scope.method = method; 
      $scope.url = url; 
     }; 
    } 

Potem dodaje kontroler trasy do mojego modułu:

var module = angular.module('Cats', ['ngResource','Cats.filters', 'Cats.services', 'Cats.directives']) 
    .config(['$routeProvider', function($routeProvider) { 
    $routeProvider.when('/main', {templateUrl: 'partials/partial1.html', controller: MyCtrl1}); 

Wreszcie, na tej stronie partial1.htm, ja dodał:

<div ng-init="fetch()"> 
    {{data}} 
</div> 

Teraz, gdy idę do tej strony w przeglądarce, widzę całą bazę danych wyrzuconą w JSON. Ahhhh. Oczywiście istnieje wiele bardziej wyrafinowanych rzeczy do wypróbowania, itp. Itp., Ale potrzebowałem tego prostego wyniku, więc mogłem być pewny, że faktycznie miałem model przychodzący po wezwaniu. Angular cicho umiera w wielu przypadkach, więc widoczny wynik był bardzo pomocny.

Jeden błąd: należy uważać, aby plik php był wykonywany przez więcej niż Ciebie jako użytkownika. Nie znam nazwy użytkownika, który AngularJS implementuje, ale musiałem to zrobić: chmod 644 index.php, aby aplikacja mogła z niego korzystać.

Mam nadzieję, że komuś pomaga.