个人中心
gpt4 book ai didi

javascript - AngularJS 中的 getter 和 setter

转载 作者：行者123 更新时间：2023-11-30 09:59:49 24 4
gpt4 key购买 nike 

confirm("Ohhh, hello there, is it Ok to click Cancel?");

我认为这基本上是关于 Angular 上的 CRUD 的问题。我对 getter 和 setter 有点困惑，主要是因为 Angular 几乎完成了获取和设置的所有工作，因为它的 two way data binding .我想知道创建 getter 和 setter 的最佳可扩展方式是什么，这样我以后就不需要修改我的函数了。

在第一个 Arrangement 中，我试图尽可能简单，但我在开始和开始设置时感到不舒服。

安排01:

$scope.getData = function(){
  $http.get(url + '/data')
  .then( function (res) {
    return res.data; } );
};

$scope.setData = function () {
  $scope.data = $scope.getData();
};

$scope.insertData = function (data) {
  $http.post(url + '/data', { data: data})
  .then( function (res) {
    // nothing here. } );
};

然而，在这第二个安排中，我试图直接去我需要去的地方。当我从服务器获取数据时，我会自动将 $scope.data 设置为检索到的数据；

安排02:

$scope.getData = function () {
  $http.get(url + '/data')
  .then( function (res) {
    $scope.data = res.data;
  });
};

$scope.insertData = function (data) {
  $http.post( url + '/data', { data: data })
  .then( function (res) {
    $scope.getData(); //To update.
    //OR $scope.data.push(res.data);
  });
};

进一步观察，我找到了 this在 Angular 文档上，但是如果 Angular 已经这样做了，那么使用 getter/setter 有什么意义呢？调查other technologies ，很难比较，因为 Angular 有自动获取。

我什至不知道如何提出这个问题。但是，基本上，我想知道我的 getter 和 setter 会如何损害我 future 的应用程序，是否有好的方法以及为什么要在 Angular 中创建 getter 和 setter。

感谢您的任何建议。

最佳答案

您的最佳做法是将您的逻辑包装到服务 中。你要知道，在 Angular 中，所有的服务都是Singleton，一个Service只有一个实例。

我通过使用 $q.defer() 做了一个简单的示例，它是来自 deferred API 的promise manager。

$q.defer() 获取 2 个方法:

  • resolve(value) :通过给她最终值来解决我们相关的 promise

  • reject(reason) :解决 promise 错误。

Controller 

(function(){

function Controller($scope, $q, Service) {

  //Use promise manager
  var defer = $q.defer();
  ///Create our promise
  var promise = defer.promise;

  $scope.data = [];

  var newData = [
    {
      name:'john',
      age: 25
    },
    {
      name: 'toto',
      age: 13
    }
  ];

  Service.get().then(function(data){
    //Retrieve our data
    $scope.data = data;

    //Set new data to our factory
    Service.set(newData);

    //Retrieve new data
    Service.get().then(function(data){
      //Resolve new data
      defer.resolve(data);
    });

  });

  //Retrieve new dataset
  promise.then(function(data){
    $scope.data = data;
  })




}

angular
.module('app', [])
.controller('ctrl', Controller);

})();

服务

(function(){

  function Service($q){

    var data = [0,1,2,3,4];

    function set(value){
      data = value;
    }

    function get(){
      return $q(function(resolve){
        //Simulate latency
        setTimeout(function(){
          //Resolve our data
          resolve(data);
        }, 1000);
      });
    }

    return {
      get: get,
      set: set
    };

  }

  angular
    .module('app')
    .factory('Service', Service);

})();

HTML

  <body ng-app='app' ng-controller="ctrl">

    <pre>{{data}}</pre>

  </body>

因此，您可以使用该服务设置一些数据，并在需要时检索它。不要忘记服务是单例。

你可以看到 Working Plunker

关于javascript - AngularJS 中的 getter 和 setter，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32257949/

24 4 0
文章推荐： java - 将传递的类的属性获取到参数 Java
文章推荐： machine-learning - 检测连续输入的数值数据中的峰值
文章推荐： java - 两次调用 Required 传播的事务函数只会产生 1 个事务(但从另一个类调用时会产生 2 个事务)
文章推荐： javascript - jQuery (".element").scrollTop(0);不起作用
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com