Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript AngularJS Basics (1.x) Services in Angular Using Services To Save and Delete Data

kushalmahajan2
kushalmahajan2
7,683 Points
Posted by kushalmahajan2
kushalmahajan2
7,683 Points

Why delete method not completed in service function deleteTodo() ? What would be the way to implement it within service?

$scope.todos.splice($index,1);

The above statement is called in controller. Makes sense to put it here to reflect the change in data and $scope will do that for us. But unfortunately we can't move this statement to my service as the $scope will not be within scope by itself. All makes sense ! But how can I implement this in service's deleteTodo method ?

2 Answers

akak
akak
29,446 Points
akak
akak
29,446 Points

I am not entirely sure if I follow what are you trying to achieve, but you can treat service just like a regular function. That being said you can create sort of shell container and pass anything you want to it. For example:

.service('MyService', function() {
    this.deleteTodo = function(arr, $index, num){
        arr.splice($index, num);
    }
})

 .controller('MyController', ['MyService', '$scope', function(MyService, $scope){
        MyService.deleteTodo($scope.todos, $index, 1);
    }]);

now you can pass any array to the service and do a splice on it.

Hope that helps :)

kushalmahajan2
kushalmahajan2
7,683 Points
kushalmahajan2
kushalmahajan2
7,683 Points

Hi akak,

Hope this helps answering !

angular.module("todoListApp", [])
.controller('mainCtrl',  function($scope, dataService){
    $scope.helloWorld = function(){
        console.log("Hi there !");
    }

  $scope.helloWorld = dataService.helloWorld;

   dataService.getTodos(function(response){
      console.log(response.data);
      $scope.todos = response.data;

    })
   $scope.todo=dataService.todo;
   $scope.deleteTodo = function(todo, $index){
     dataService.deleteTodo($index);
     // $scope.todos.splice($index, 1);
   }
   $scope.saveTodo = function(todo){
      dataService.saveTodo(todo);
   }

})
.service('dataService', function($http){
  this.helloWorld = function(){
    console.log("This is the data service's method !");
  };

 this.getTodos = function(callback){
    $http.get('../mock/todos.json').then(callback);
  };
 this.todo =[];

 this.deleteTodo = function($index){
    console.log("The todo" + todo.name + " todo has been deleted ");
    this.todo.splice($index, 1);

  };
  this.saveTodo = function(todo){
   console.log('The' + todo.name + ' todo has been saved!');
  };

});
Floyd Orr
Floyd Orr
11,723 Points
Floyd Orr
Floyd Orr
11,723 Points

can someone explain how the save button works ? $scope.saveTodo = function(todo){ dataService.saveTodo(todo); } When they click ng-click=saveTodo(todo). When that gets sent to the service, then it gets sent to the controller.How does that change the editing back to non edit mode?I don't see how it works, please help.