AngularJS中的吸气剂和二传手

时间:2015-08-27 19:29:57

标签: javascript angularjs oop getter-setter

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

进一步观察,我在Angular Docs上找到this,但是如果Angular已经这样做,那么使用getter / setter的重点是什么?调查other technologies,很难比较,因为Angular已自动获取。

我甚至不知道如何制定这个问题。但是,基本上,我想知道我的getter和setter如何损害我未来的应用程序,以及是否有一个好方法以及为什么要在Angular中创建getter和setter。

感谢您的任何建议。

3 个答案:

答案 0 :(得分:2)

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

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

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

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

  • 拒绝(原因):解决了承诺错误。

<强>控制器

(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

答案 1 :(得分:1)

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

此外,如果每个字段执行此操作,则每次更改时发送HTTP请求的解决方案都会产生开销。你改为直接写到字段。

虽然例如WPF / C#要求您定义setter以引发OnPropertyChanged,在AngularJS中不需要它。您在AngularJS中编写的所有内容都将自动触发所谓的$digest周期,检查所做的更改。然后它会自动更新您的用户界面,让您使用模板绑定或ng-model指令。

答案 2 :(得分:1)

如果您认为纯粹的Javascript,基本相同的逻辑,角色的作用是创建modules,以便您使用最佳实践,因此很容易使用它们。

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

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

  ..
}

并使用角度,就像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]);