在nwjs中将数据从nodejs传递到angular的正确方法(node-webkit)

时间:2015-07-26 22:08:04

标签: javascript angularjs node.js node-webkit nedb

解决:以下代码现在适用于任何需要它的人。

  1. 创建一个查询数据库并返回查询结果的Angular工厂。
  2. 将查询结果传递到我的控制器的$ scope
  3. 在我的视图(html)
  4. 中渲染$ scope变量的结果

    挑战: 因为这是针对node-webkit(nwjs)应用程序,我试图在不使用express,设置api端点和使用$ http服务返回查询结果的情况下执行此操作。我觉得通过直接将数据从nodejs传递给角度控制器,应该有一种更有说服力的方法。以下是我的尝试,但它没有奏效。

    数据库:以下代码适用于nedb数据库。

    我的已更新控制器

    app.controller('homeCtrl', function($scope,homeFactory){
    
        homeFactory.getTitles().then(function(data){
            $scope.movieTitles = data;
        });
    });
    

    我的已更新工厂:

    app.factory('homeFactory', function($http,$q) {
    
    return {
    
        getTitles: function () {
            var deferred = $q.defer();
            var allTitles = [];
    
            db.find({}, function (err, data) {
                for (var i = 0, len = data.length; i < len; i++) {
                    allTitles.push(data[i].title)
                }
                deferred.resolve(allTitles);
            });
    
            return deferred.promise;
        }
    }
    

    });

    HTML

       <script>
            var Datastore = require('nedb');
            var db = new Datastore({ filename: './model/movies.db', autoload: true });
        </script>
    
    <--shows up as an empty array-->
    <p ng-repeat="movie in movieTitles">{{movie}}</p>
    

2 个答案:

答案 0 :(得分:1)

部分答案:我能够通过将所有代码移动到控制器中来实现它。现在有人如何重构下面的工厂来清理代码?

更新的控制器($ scope.movi​​etitles正在使用正确的数据更新视图):

    $scope.movieTitles = [];

    $scope.getMovieTitles =  db.find({},function(err,data){

        var arr = [];

        for (var i = 0, len = data.length; i < len; i++){
            arr.push(data[i].title)
        }

        $scope.movieTitles = arr;
        $scope.$apply();

    });

答案 1 :(得分:1)

原始homeFactory的问题是db.find异步发生。虽然你可以在回调中使用它,但我认为最好用$q包装它们。

app.service('db', function ($q) {
  // ...
  this.find = function (query) {
    var deferred = $q.defer();

    db.find(query, function (err, docs) {
      if (err) {
        deferred.reject(err);
      } else {
        deferred.resolve(docs);
      }
    });

    return deferred.promise;
  };
  // ...
});

一旦开始包装这样的非Angular代码,它就会使界面保持一致。

app.service('homeFactory', function (db) {
  this.getAllTitles = function () {
    return db.find({}).then(function (docs) {
      return docs.map(function (doc) {
        return doc.title;
      });
    });
  };
});

控制器看起来像:

app.controller('homeCtrl', function ($scope, homeFactory) {
  homeFactory.getAllTitles().then(function (titles) {
    $scope.movieTitles = titles;
  });
});