6

Mac の localhost で AngularJS 1.0、PHP、および mysql を使用しています。

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

これで、dbase を開いて 3 つのレコードを取得し、[{"id":"1","name":"Larry"},{"id": "2","name":"Curly"},{"id":"3","name":"萌え"}]

最新の angular-seed を使用して、Eclipse でプロジェクトをセットアップしました。app.js で次のように書きました。angular.module('Cats', ['ngResource','Cats.filters', 'Cats.services', 'Cats.directives']) PHP コードを services フォルダーに置き、「index.php」という名前を付けました。Mac で localhost を使用してブラウザーでその services/index.php に移動すると、上記の JSON が返されます。これまでのところ、すべてがクールです。

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

オンラインであらゆる種類のデモを試しました (多くは古くなっています)。誰かがこれを行うための簡単で現在の方法を教えてもらえますか? 私の人生では、あらゆる種類の AngularJS デモが動作していますが、理解できる方法でこの単純なタスクを実行するものはありません。

前もって感謝します。

4

2 に答える 2

4

これも機能するはずです。コードの行数は大幅に減っていますが、エラー処理が削除されていることに注意してください。

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

通常、組み込みの.get()メソッドを使用し$resouceますが、応答は配列の形式であり、.query()デフォルトでサポートされています。

ここでドキュメントを見つけることができます$resource

于 2012-07-02T22:44:48.920 に答える
3

わかった。解決しました。まず、例の 1 つで見つけたコントローラーをコピーして追加しました。

    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 ページに、これを追加しました。

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

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

1 つの落とし穴: php ファイルは、ユーザー以外でも実行できることに注意してください。AngularJS が実装するユーザーの名前はわかりませんがchmod 644 index.php、アプリがそれを使用できるようにする必要がありました。

それが誰かを助けることを願っています。

于 2012-07-01T09:51:24.380 に答える