2

Angular JS と node.js/express フレームワークは初めてです。私は角度のあるフレームワークとエクスプレス フレームワークを使用する小さなアプリケーションに取り組んでいます。いくつかのエンドポイントで高速アプリを実行しています。1 つは POST アクション用、もう 1 つは GET アクション用です。node-mysql モジュールを使用して、mysql データベースに保存およびフェッチしています。

このアプリケーションは私のラップトップで実行されています。

angular.js クライアント:

コントローラ

function ItemController($scope, storageService) {
   $scope.savedItems = storageService.savedItems();
   alert($scope.savedItems);
}

サービス

myApp.service('storageService', function($resource) {

    var Item = $resource('http://localhost\\:3000/item/:id',
      {
         id:'@id',
      },

      {
         query: {
            method: 'GET',
            isArray: true
      }
    );

    this.savedItems = function() {
      Item.query(function(data){
      //alert(data);
          return data;
       });
    }

mysql データベースを備えた Express サーバー:

...
app.get('/item', item.list);
...

items.js
---------
exports.list = function(req, res) {

   var sql = 'select * from item';

   connect: function() {
      var mysql = require('mysql');
      var connection = mysql.createConnection({
        host     : 'localhost',
        user     : 'admin',
        database : 'test'
      });
      return connection;
   },

   query: function(sql) {
      var connection = this.connect();
      return connection.query(sql, function(err, results) {
         if (err) throw err;
         return results;
      });
   },
   res.send(results);
};

サーバーから項目 (json) の静的配列を送信すると、 $scope.savedItems() が読み込まれます。

しかし、データベースのアイテムにアクセスすると、サーバーがアイテムを返しても、クライアントの $scope.savedItems は空です。$http を直接使用しても役に立ちませんでした。

angular.js ドキュメントから $resource と $http の非同期の性質を読みましたが、まだ何かが足りないか、何か間違っています。

よろしくお願いいたします。

4

3 に答える 3

2

これは、angular $resource の非同期の性質に関係しています。

$scope.savedItems = storageService.savedItems();

データが返された後に設定される空の配列をすぐに返します。したがってalert($scope.savedItems);、空の配列のみが表示されます。$scope.savedItems少し後で自分のものを見ると、データが取り込まれていることがわかります。返された直後にデータを使用したい場合は、コールバックを使用できます。

$scope.savedItems = storageService.savedItems(function(result) {alert(result); });
于 2013-02-28T07:46:31.257 に答える
1

簡単なメモとして。また、savedItems を見ることもできます。

function ItemController($scope, storageService) {
   $scope.savedItems = storageService.savedItems();
   $scope.$watch(function() {
      return $scope.savedItems;
   }, function(newValue, oldValue) {
      if (typeof newValue !== 'undefined') {
         // Do something cool
      }
   },
   true);
}
于 2013-02-28T10:39:05.040 に答える