AngularJS 中的 getter 和 setter

Question

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

我认为这基本上是关于 Angular 上的 CRUD 的问题。我对 getter 和 setter 有点困惑，主要是因为 Angular 由于其 two way data binding 几乎完成了获取和设置事物的所有工作。我想知道创建 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. } );
};

然而，在这第二个安排中，我试图直接去我需要去的地方。当我从服务器获取数据时，我会自动将 $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 on the Angular Docs, but what's the point in using a getter/setter if Angular already do it? Looking into other technologies，很难比较，因为Angular有auto-get。

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

中创建 getter 和 setter

感谢任何建议。

Answer 1

在 JavaScript 中，您通常不像在 OOP 语言中那样使用 getter 和 setter，尤其是因为您没有隐私概念（因此任何人都可以访问您的字段）。 ES5 有 getter 和 setter，但它也添加了隐藏实现细节的缺失功能。如果您想在 AngularJS 应用程序中使用 getter 和 setter 来获取额外的逻辑，您可以简单地定义使用 $watch.

更新的额外字段

此外，如果您针对每个字段执行此操作，则在每次更改时发送 HTTP 请求的解决方案是一种开销。您要做的是直接写入字段。

虽然例如WPF/C# 要求您定义 setter 来引发 OnPropertyChanged，您在 AngularJS 中不需要这个。您在 AngularJS 中编写的所有内容都会自动触发所谓的 $digest 循环，它会在其中检查已进行的更改。然后它将自动更新您的用户界面，假设您使用模板绑定或 ng-model 指令。

Answer 2

如果你认为纯粹的Javascript，是基本相同的逻辑，angular所做的是创造modules给你使用的最佳实践，所以很容易使用他们。

function DataService($http) {
  this.get = function() {
    return $http.get(...);
  }

  this.create = function(newData) {
    return $http.post(...);
  }

  ..
}

并使用 angular，就像 Ali Gajani 所说的那样，您基本上可以做到这一点，

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]);

Answer 3

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

我做了一个简单的例子，使用 $q.defer()，它是 promise manager 来自推迟 API.

$q.defer() 得到 2 个方法 :

resolve(value) ：通过给她最终值
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);

})();

HTML

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

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

  </body>

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

您可以看到 Working Plunker

AngularJS 中的 getter 和 setter

Getters and Setters in AngularJS

javascript

oop

getter-setter

angularjs