kết nối AngularJS với mysql bằng dịch vụ PHP của tôi?

Question

Tôi đang sử dụng AngularJS 1.0, PHP và mysql với localhost trên máy Mac của mình.

Tôi có cơ sở dữ liệu mysql rất đơn giản: "mèo". Nó có một bảng gọi là "mèo con". Bảng có hai cột, "id" và "name". Có ba chú mèo con trong cơ sở dữ liệu có tên Larry, Curly và Moe.

Bây giờ, tôi có một số mã PHP đơn giản mở dbase, lấy ba bản ghi và trả về chúng trong JSON như sau: [{"id": "1", "name": "Larry"}, {"id": "2", "name": "Curly"}, {"id": "3", "name": "Moe"}]

Tôi đã sử dụng hạt giống góc cạnh mới nhất và thiết lập một dự án trong Eclipse. Trong app.js tôi đã viết điều này: 'sử dụng nghiêm ngặt'; angular.module ('Cats', ['ngResource', 'Cats.filters', 'Cats.services', 'Cats.directives']) Tôi đặt mã PHP của mình vào thư mục dịch vụ và đặt tên là "index.php ". Nếu tôi điều hướng đến các dịch vụ/index.php đó trong trình duyệt của tôi bằng cách sử dụng localhost trên máy Mac, tôi lấy lại JSON ở trên. Cho đến nay mọi thứ đều mát mẻ.

Bây giờ - TẤT CẢ TÔI MUỐN LÀM (các từ cuối cùng nổi tiếng;) kết nối với dịch vụ PHP tôi có và hiển thị nội dung của bảng Cats trên trang chỉ mục chính của tôi bằng cách sử dụng dự án AngularJS của tôi. Văn bản cũ, không có bảng, chỉ cần liên kết với tài nguyên sẵn có và hiển thị nó.

Tôi đã thử tất cả các cách trình diễn trực tuyến (nhiều tài liệu đã lỗi thời). Bất cứ ai có thể chỉ cho tôi một cách đơn giản, hiện tại để làm điều này? Đối với cuộc sống của tôi, tôi có tất cả các loại trình diễn AngularJS nhưng không ai trong số họ thực hiện nhiệm vụ đơn giản này theo cách tôi có thể hiểu được.

Cảm ơn bạn trước.

Answer 1

Điều này cũng sẽ hiệu quả. Đó là ít đáng kể dòng mã, nhưng lưu ý rằng bất kỳ xử lý lỗi đã bị xoá:

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

Bình thường, tôi đã sử dụng được xây dựng trong .get() phương pháp trên $resouce nhưng trả lời của bạn là ở dạng của một mảng, mà .query() hỗ trợ theo mặc định.

Bạn có thể tìm documentation on $resource here

Answer 2

OK. Giải quyết nó. Đầu tiên, sao chép và thêm một bộ điều khiển tôi tìm thấy trong một trong những ví dụ:

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

Sau đó, tôi đã thêm một bộ điều khiển đường đến mô-đun của tôi:

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

Cuối cùng, trên trang đó partial1.htm, tôi đã thêm điều này:

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

Bây giờ khi tôi truy cập trang đó trong trình duyệt, tôi có thể thấy toàn bộ cơ sở dữ liệu bị loại bỏ trong JSON. Ahhhh. Rõ ràng có nhiều thứ phức tạp hơn để thử, vv .. nhưng tôi cần kết quả đơn giản này để tôi có thể chắc chắn rằng tôi đã làm trong thực tế có một mô hình đến khi triệu hồi. Góc chết âm thầm trong nhiều trường hợp, do đó, một kết quả có thể nhìn thấy là khá hữu ích.

Một lưu ý: hãy cẩn thận rằng tệp php có thể được thực thi nhiều hơn chính bạn với tư cách là người dùng. Tôi không biết tên của người dùng mà AngularJS thực hiện nhưng tôi đã phải chmod 644 index.php để ứng dụng có thể sử dụng nó.

Tôi hy vọng rằng sẽ giúp ai đó.