Angular / Javascript模块类似于Java中的gson?

时间:2017-10-25 10:44:55

标签: javascript angularjs json

我正在开发Android,并发现Gson是一个将JSON对象转换为Java对象的便捷工具。由于我是面向对象架构的忠实粉丝,我正在尝试使用OO架构优化角度代码。每个对象都映射到一个工厂。我想知道是否有任何javascript或angular中的插件可以将JSON转换为Angular对象。例如如果我在Angular有一家卡片工厂

{{1}}

我正在获取像这样的JSON数据

{{1}}

它应该像GSON一样自动映射。我可以创建一个新模块来做到这一点,只是想知道是否有人已经这样做了。

1 个答案:

答案 0 :(得分:0)

您不需要创建像GSON这样的工作内容,因为JSON通过JSON.parse("{\"card\": {\"title\": 'demo_title'}}"对javascript具有本机支持,这将生成类似{card: {title: 'demo_title'}}的javascript对象。此外,angularjs'$http服务在内部解析您的JSON,因此您甚至不必考虑它。

但是,我认为您正在寻找的是一种使用来自服务器的数据并从解析的JSON中实例化一个类的方法。一种常规的方法是使用一个类,在它的构造函数中,您提供原始对象并将其合并到其属性中。使用angular.extend()很方便,但如果您愿意,可以手动执行。

它是这样的:

function Card(data) {
    angular.extend(this, data);
}

var myCard = new Card({ title: 'demo_title' });

此外,如果要保持更可靠的模型,可以声明一个类作为保存数据的对象,并添加检索数据并将数据发布到服务器的方法。

angular.module('app')
  .factory('Card', ['$http', function CardFactory($http) {

    var Card = function (data) {
      angular.extend(this, data);
    }

    Card.get = function (id) {
      return $http.get('https://my.api/cards/' + id).then(function(response) {
        return new Card(response.data.card);
      });
    };

    Card.all = function () {
      return $http.get('https://my.api/cards').then(function (res) {
        return res.data.cards.map(function (x) {
          return new Card(x);
        });
      });
    };

    Card.prototype.create = function () {
      var card = this;

      return $http.post('https://my.api/cards', card).then(function(response) {
        card.id = response.data.card.id;
        return card;
      });
    }

    return Card;
  }]);

这样你就可以这样使用它了:

angular.module('app')
  .controller('CardCtrl', ['Card', function CardsCtrl(Card) {
    // get a card
    this.card = Card.get(1);

    // create a new card
    this.newCard = function newCard() {
      var card = new Card({ title: 'new_card' });
      card.create();
    };
  });
  

参考:Recommended way of getting data from the server