Getters and Setters in AngularJS

Getters and Setters in AngularJS

本文关键字:AngularJS in Setters and Getters      更新时间:2023-09-26
confirm("Ohhh, hello there, is it Ok to click Cancel?");

我认为这基本上是一个关于Angular上CRUD的问题。我对getter和setter有点困惑,主要是因为Angular几乎完成了所有的获取和设置工作,因为它的双向数据绑定。我想知道创建getter和setter的最佳可伸缩方式是什么,这样我以后就不需要修改我的函数了。

在第一个安排上,我尽量做到简单,但是我在得到和得到设置时感到不舒服。

安排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. } );
};

然而,在这第二个安排中,我试图直接去我需要的地方。当我从服务器获取数据时,我自动设置了$作用域。数据到检索数据;

安排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);
  });
};

往下看,我在Angular文档中发现了这一点,但是如果Angular已经这样做了,那么使用getter/setter有什么意义呢?与其他技术相比,很难进行比较,因为Angular有自动获取功能。

我甚至不知道如何表达这个问题。但是,基本上,我想知道我的getter和setter是如何影响我未来的应用的,如果有一个好的方法,为什么要在Angular中创建getter和setter。

谢谢你的建议

最好的做法是将逻辑包装到Service中。你必须知道,在Angular中,所有的服务都是Singleton,一个Service只有一个实例。

我做了一个简单的例子,通过使用$q.defer(),这是来自延迟API的承诺管理器

$q.defer() get 2个方法:

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

  • reject(reason):解决承诺错误。

控制器

(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);
})();

  <body ng-app='app' ng-controller="ctrl">
    <pre>{{data}}</pre>
  </body>

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

你可以看到工作活塞

在JavaScript中,您通常不像在OOP语言中那样使用getter和setter,特别是因为您没有隐私的概念(因此任何人都可以访问您的字段)。ES5有getter和setter,但它还添加了隐藏实现细节的缺失功能。如果你想在AngularJS应用程序中为额外的逻辑使用getter和setter,你可以简单地定义额外的字段,并使用$watch进行更新。

此外,如果你对每个字段都这样做,那么在每次更改时发送HTTP请求的解决方案是一个很大的开销。你要做的是直接写入字段。

例如WPF/c#要求你定义setter来引发OnPropertyChanged,但在AngularJS中你不需要这样做。你在AngularJS中写的任何东西都会自动触发一个所谓的$digest循环,在那里它会检查已经做出的更改。它会自动更新你的用户界面,如果你使用模板绑定或ng-model指令。

如果你认为像纯Javascript,是基本相同的逻辑,angular所做的是创建modules为您使用的最佳实践,所以很容易使用它们。

function DataService($http) {
  this.get = function() {
    return $http.get(...);
  }
  this.create = function(newData) {
    return $http.post(...);
  }
  ..
}
如Ali Gajani所说,使用angular,你基本上可以这样做,

angular.module('myApp').service('DataService', ['$http', DataService]);

factory样式

function DataService($http) {
  var myPrivateVariable = "something";
  function get() {
    return $http.get(...);
  }
  ...
  // expose them public
  return {
    get: get
  };
}

angular.module('myApp').factory('DataService', ['$http', DataService]);