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

I think that this is, basically, a question about CRUD on Angular. I'm kind of confused about getters and setters, mainly because Angular do almost all the job in getting and setting things because of its two way data binding. I want to know what's the best scalable way to create getters and setters so I wont need to modify my functions in the future.

On the first Arrangement, I'm trying to be as simple as I can be, but I feel unfortable in getting and getting to set.

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

On this second Arrangement, however, I'm trying to go directly where I need to. When I fetch data from the server, I'm automagicaly setting my $scope.data to the retrieved data;

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

Looking further, I've found this on the Angular Docs, but what's the point in using a getter/setter if Angular already do it? Looking into other technologies, it's hard to pare, because Angular has auto-get.

I don't even know how to formulate this question. But, basically, I want to know how could my getters and setters harm my future application and if there's a good way and why to create getters and setters in Angular.

Thanks for any advice.

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

I think that this is, basically, a question about CRUD on Angular. I'm kind of confused about getters and setters, mainly because Angular do almost all the job in getting and setting things because of its two way data binding. I want to know what's the best scalable way to create getters and setters so I wont need to modify my functions in the future.

On the first Arrangement, I'm trying to be as simple as I can be, but I feel unfortable in getting and getting to set.

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

On this second Arrangement, however, I'm trying to go directly where I need to. When I fetch data from the server, I'm automagicaly setting my $scope.data to the retrieved data;

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

Looking further, I've found this on the Angular Docs, but what's the point in using a getter/setter if Angular already do it? Looking into other technologies, it's hard to pare, because Angular has auto-get.

I don't even know how to formulate this question. But, basically, I want to know how could my getters and setters harm my future application and if there's a good way and why to create getters and setters in Angular.

Thanks for any advice.

• javascript
• angularjs
• oop
• getter-setter

Share Improve this question Follow edited May 23, 2017 at 12:22 CommunityBot 111 silver badge asked Aug 27, 2015 at 19:29 RodmentouRodmentou 1,64033 gold badges2222 silver badges4040 bronze badges 2

• Services is the answer. Use the .factory({}); – Ali Gajani Commented Aug 27, 2015 at 19:33
• Thanks, @AliGajani . How would it help? I don't want to auto-create functions, I want to know the best practices. – Rodmentou Commented Aug 27, 2015 at 19:36

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

You good practice is to wrap your logic into Service. You have to know that in Angular, all services are Singleton, there is only a single instance of a Service.

I've made a simple example, by using $q.defer() which is the promise manager from the deferred API.

$q.defer() get 2 methods :

• resolve(value) : which resolve our associated promise, by giving her the final value

• reject(reason) : which resolve an promise error.

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

})();

Service

(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>

So, you can set some data by using the service, and retrieve it when you want. Don't forget that service is singleton.

You can see the Working Plunker

In JavaScript you typcially don't use getters and setters like in OOP languages, especially because you do not have a notion of privateness (so anyone can access your fields). ES5 has getters and setters, but it also adds this missing capabilities of hiding implementation details. In case you want getters and setters for additional logic in your AngularJS app, you could simply define additional fields which are updated using $watch.

Furthermore you solution with sending an HTTP request on every change is a it of an overhead if you do this per field. What you instead to is writing directly to fields.

While e.g. WPF/C# requires you to define setters to raise OnPropertyChanged, you don't need this in AngularJS. Everything that you write in AngularJS will automatically trigger a so-called $digest cycle, where it checks for changes that have been made. It will then automagically update your user interface, give that you use template bindings or ng-model directives.

If you think like pure Javascript, is basic the same logic, what angular does is create modules for you to use the best practice, so it is easy to use them.

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

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

  ..
}

and using angular, like Ali Gajani sayd, you basically can do this,

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

or with a factory style

function DataService($http) {
  var myPrivateVariable = "something";

  function get() {
    return $http.get(...);
  }
  ...

  // expose them public
  return {
    get: get
  };
}


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