¿conecta AngularJS a mysql usando mi servicio de PHP?

Question

Estoy usando AngularJS 1.0, PHP y mysql con localhost en mi Mac.

Tengo una base de datos mysql muy simple: "gatos". Tiene una tabla llamada "gatitos". La tabla tiene dos columnas, "id" y "nombre". Hay tres gatitos en la base de datos con los nombres Larry, Curly y Moe.

Ahora, tengo un código PHP simple que abre el dbase, obtiene los tres registros, y los devuelve en JSON de la siguiente manera: [{"id": "1", "name": "Larry"}, {"id": "2", "nombre": "Rizado"}, {"id": "3", "nombre": "Moe"}]

Utilicé la última semilla angular y configuré un proyecto en Eclipse. En app.js escribí esto: 'use strict'; angular.module ('Cats', ['ngResource', 'Cats.filters', 'Cats.services', 'Cats.directives']) Pongo mi código PHP en la carpeta services y lo llamo "index.php" ". Si navego a esos servicios/index.php en mi navegador utilizando localhost en la Mac, obtengo el JSON anterior. Hasta ahora todo está bien.

Ahora - TODO LO QUE QUIERO HACER (! Célebres últimas palabras;) es conectarme al servicio de PHP que tengo y mostrar los contenidos de esa tabla de Cats en mi página de índice principal usando mi proyecto AngularJS. Texto sin formato, sin tablas, solo agréguese al recurso disponible y muéstrelo.

He intentado todo tipo de demostraciones en línea (muchas están desactualizadas). ¿Alguien puede mostrarme una forma simple y actual de hacer esto? Por mi vida, tengo todo tipo de demostraciones de AngularJS funcionando, pero ninguna de ellas hace esta simple tarea de una manera que yo pueda entender.

Gracias de antemano.

Answer 1

Esto también debería funcionar. Es significativamente menos líneas de código, pero tenga en cuenta que cualquier tratamiento de errores se ha eliminado:

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

Normalmente habría utilizado el construido en .get() método en la $resouce pero su respuesta es en forma de una matriz, que .query() compatible por defecto.

puede encontrar permiso documentation on $resource here

Answer 2

OK. Resuelto. En primer lugar, copia y se añadió un controlador que encontré en uno de los ejemplos:

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; 
     }; 
    } 

Luego, añadí un controlador de ruta a mi módulo:

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}); 

Por último, en esa página partial1.htm, me añadió esto:

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

Ahora, cuando voy a esa página en el navegador, que puede ver toda la base de datos volcada en JSON. Ahhhh. Claramente hay muchas cosas más sofisticadas que probar, etc., pero necesitaba este resultado simple para poder estar seguro de que, de hecho, tenía un modelo que llegaba cuando lo llamaba. Angular muere silenciosamente en muchos casos, por lo que un resultado visible fue bastante útil.

One gotcha: tenga cuidado de que el archivo php sea ejecutable por más de usted como usuario. No sé el nombre del usuario que AngularJS implementa pero tuve que llamar al chmod 644 index.php para que la aplicación pudiera usarlo.

Espero que ayude a alguien.