2012-06-30 15 views
6

私はMac上でlocalhostでAngularJS 1.0、PHP、mysqlを使用しています。PHPサービスを使用してAngularJSをmysqlに接続しますか?

私は非常に単純なmysqlデータベース「cats」を持っています。それは "子猫"と呼ばれる1つのテーブルがあります。テーブルには2つの列、 "id"と "name"があります。データベースには、Larry、Curly、Moeの3つの子猫があります。

ここでは、dbaseを開き、3つのレコードを取得し、JSONで次のように返します。 [{"" id ":" 1 "、" name ":" Larry "}、

私は最新の角種子を使用していましたが、 Eclipseのプロジェクトapp.jsで私はこれを書いた: 'use strict'; angular.module( 'Cats'、['ngResource'、 'C​​ats.filters'、 'C​​ats.services'、 'C​​ats.directives']) サービスフォルダにPHPコードを入れ、 "index.php " Macのlocalhostを使用してブラウザのservices/index.phpに移動すると、上記のJSONが返されます。これまでのところすべてがクールです。

Now - 私がやるべきことは(私の最後の言葉は有名ですが)私が持っているPHPサービスに接続し、私のAngularJSプロジェクトを使って私のメインのインデックスページにそのCatsテーブルの内容を表示します。プレーンな古いテキスト、テーブルなし、利用可能なリソースにバインドして表示するだけです。

私はすべての方法でオンラインデモを試しました(多くのものは古くなっています)。誰も私にこれを行うためのシンプルで現在の方法を表示することはできますか?私の人生の間、私はあらゆる種類のAngularJSデモを動作させていますが、私は理解できる方法でこの単純な作業をしていません。

ありがとうございます。

+0

OKを見つけることができます。 ngResourceはモジュール内にあります。実際のangular-resource.jsコードのコメントは、それに続く詳細を示し、解決策を見つけると投稿します。 – noogrub

答えて

4

これも機能するはずです。これは、コードの有意に少ないラインですが、任意のエラー処理が削除されていることに注意してください:

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

は、通常、私は$resouce.get()方法で構築使用していただろうが、あなたの応答は.query()アレイの形態であり、デフォルトでサポートされています。

あなたは、私が1.0.1rc3で、私は角度-resource.jsが含まれている必要が$リソースコードを、見つけdocumentation on $resource here

+0

ありがとう、ノア、私はあなたのコメントをいただきありがとうございます。誰かがこれを読んでいるのか疑問に思っていました。 Bloomington、Indianaからの乾杯。 – noogrub

+0

実際には、それを差し込んでも動作しません。なぜか神秘的だった。 – noogrub

+0

奇妙なことに、私はそれをローカルに設定し、うまくいきました。どのようなエラーメッセージが表示されますか? Angularのエラーを解読する上で私は専門家ではありません。 –

3

OK。それを解決した。まず、コピーされたと私は例の一つで見つかったコントローラを追加しました:その後

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

を、私は私のモジュールへのルートコントローラを追加しました:

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

最後に、そのpartial1.htmページで、I

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

ブラウザでそのページに移動すると、JSONでデータベース全体がダンプされているのがわかります。ああ。明らかに、もっと洗練されたものなどがありますが、私はこの単純な結果が必要でしたので、実際に召喚されたときにモデルが到着したことを確信できました。角膜は多くの場合、静かに死ぬので、目に見える結果が非常に役立ちました。

1つの問題点:phpファイルがあなた自身以上にユーザーとして実行可能であることに注意してください。 AngularJSが実装しているユーザーの名前はわかりませんが、chmod 644 index.phpにする必要がありました。

私は誰かを助けることを願っています。