How do I define CRUD operations in a service (AngularJS)

Question

I have a problem with my CRUD operations in the service. When I click on Create Btn it is creating an object but it doesn't push the object in the table list.

Ctrl (where's the table list):

$scope.nameslist = CrudService.getAll();

Ctrl (for Modal dialog):

$scope.createItem = function (newObj) {
   CrudService.create(newObj);
   $scope.newObj = null;
   $scope.ok();
}

CRUD Service (it's a .factory):

...
return {
    getAll: function () {
       return resService.names.query();
    },

    create: function (newObj) {
       resService.names.save(newObj);
       //this.getAll.push(newObj); //this doesn't work
    }
...

Request Service (also a .factory):

...
return {
  names: $resource(baseUrl + '/api/names/:Id', {
      Id: '@Id'
  }, {
     'update': {
          method: 'PUT'
     }
  })
...

Can anyone help me? How can I push the new object in the table list?

Either you push your new item manually or call the getAll function again to get the updated item from server. — Chandermani
– Chandermani, Commented Jun 17, 2015 at 15:57

Dominic Scanlan · Accepted Answer · 2015-06-18 09:04:58Z

2

After you've created the object you can push the object to the list or call getAll

$scope.createItem = function (newObj) {
   CrudService.create(newObj);
   $scope.newObj = null;
   $scope.ok();
   \\either
   $scope.nameslist = CrudService.getAll();
   \\or
   $scope.nameslist.push(newObj); // this assumes this is an array
}

UPDATE/// $broadcast sends messages down to child controllers whereas $emit sends them up. using $rootscope.$emit first inject it into the controller

.controller('myCtrl' ['$scope', '$rootscope', function($scope, $rootscope ...

then you can use $rootscope.$emit('added-Name') or you can even add an argument so $rootscope.$emit('added-Name', {newObj: newobj})

then in the catching controller

$rootscope.$on('added-Name'), function(event, args) {
    $scope.namelist.push(args.newObj);
    //or if you're not passing the argument
    $scope.nameslist = CrudService.getAll();
});

using a Shared Service:

angular.module('myApp').service('sharedService', function(){
    var nameList = [];
    return{
        get: function(){
            return nameList;
        }
        set: function(val){
            nameList = val;
        }
        add: function(name){
            nameList.push(name);
        }
    }
})

inject the sharedservice into the controller `.controller('ctrl', ['$scope', 'sharedService', function($scope, sharedService ....

fill the nameList in the service with sharedService.set(CrudService.getAll()); and in $scope.createItem you could have sharedService.add(newObj);

then you can have a watch on the sharedService.get()

$scope.$watch(function() {
            return sharedService.get();
        }, function(newValue, OldValue) {

            if (newValue !== OldValue) {
                $scope.namesList = sharedService.get();
            }
        });

edited Jun 18, 2015 at 9:04

answered Jun 17, 2015 at 16:03

Dominic Scanlan

1,0091 gold badge6 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

yuro Over a year ago

Is this good practice? I thought this would be defined in the service?!

Dominic Scanlan Over a year ago

the get? then use your getAll(). That is the best way as you're keeping in sync with the server. I was just demonstrating that you could add the object directly into your list.

yuro Over a year ago

no I mean $scope.nameslist.push(newObj) Is there an opportunity to define this in the service?

yuro Over a year ago

The $scope.nameslist is in an other Ctrl as well than the $scope.createItem

Dominic Scanlan Over a year ago

ah i see. looks like you'll require some way of telling the table list Ctrl to get the list again. You could you $rootscope.$broadcast or $rootscope.$emit to send a signal throughout the app or you could have a service to hold the nameslist and $watch for changes.

|

Collectives™ on Stack Overflow

How do I define CRUD operations in a service (AngularJS)

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related