Угловой завод $ ресурс, создающий пустой объект в базе данных

Question

Я создал приложение REST с использованием углового ресурса $, но я замечаю, что каждый раз, когда я делаю put или post с помощью формы ... $ resource создает пустую запись (объект) в базу данных каждый раз есть перезагрузка страницы, которая затем отображается в интерфейсе. Это также происходит, когда post/put не создается, а просто перезагружается. Я не знаю, правильно ли я использую функцию $ save или есть что-то с моим кодом.

======================================================================================================================================= ========================================

<div id="hello"> 
<div class='row'> 
    <div class="col-md-6"> 
     <label for="content">Get greeting by ID:</label> 
     <div> 
      <input type='text' ng-model='$ctrl.getId' name="id" class="form-control"/> 
      <span> {{ $ctrl.greeting.content }} </span> 
     </div> 
     <button ng-click='$ctrl.get();'>Get</button> 
     <hr/> 
     <div class="form-group"> 
      <label for="content">Post new Greeting:</label> 
      <div> 
       <textarea ng-model='$ctrl.postData' name="content" class="form-control"></textarea> 
      </div> 
      <button ng-click='$ctrl.post();'>Submit</button> 
     </div> 
     <hr/> 
     <div class="form-group"> 
      <label for="content">Edit greeting by ID:</label> 
      <div> 
       <input type='text' ng-model='$ctrl.updateId' name="id" class="form-control"/> 
      </div> 
     </div> 
     <div class="form-group"> 
      <div> 
       <textarea ng-model='$ctrl.updateData' name="content" class="form-control"></textarea> 
      </div> 
      <button ng-click='$ctrl.put();'>Submit</button> 
     </div> 
     <hr/> 
    </div> 
    <div class="col-md-6"> 
     <hr/> 
     <div class='row' ng-init="$ctrl.listAll()"> 
      <div ng-repeat="eachElement in $ctrl.greetingList.hello_collection"> 
       <div class="col-md-2"> {{ eachElement.id }} </div> 
       <div class="col-md-5"> {{ eachElement.content }} </div> 
       <div class="col-md-5"><button ng-click="$ctrl.remove(eachElement.id)">delete</button></div> 
      </div> 
     </div> 
    </div> 
</div> 
<hr/> 

=================== ======================================================================================== ==========

.factory("helloService", ['$resource', 
     function($resource) { 
      return $resource('/direct/hello/:greetingId.json', 
       { greetingId: '@greetingId' }, { 
       get: { 
        method: 'GET', 
        params: {greetingId: '@greetingId'}, 
        isArray: false 
       }, 
       post: { 
        method: 'POST', 
        headers:{'Content-Type':'application/json; charset=UTF-8'}, 
       }, 
       put: { 
        method: 'PUT', 
        params: {greetingId: '@greetingId'} 
       }, 
       remove: { 
        method: 'DELETE', 
        params: {greetingId: '@greetingId'} 

       }, 
       listAll: { 
        method: 'GET', 
        isArray: false 
       }, 
      }); 
     } 
    ]) 

================================ компонент ========================

.component('hello', { 
     controller: ['helloService', 
      function (helloService) { 
       var self = this; 
       self.greetingList; 
       function get() { 
        self.greeting = helloService.get({greetingId: self.getId}); 
       } 
       self.get = get; 

       function post() { 
        self.newGreeting = helloService.post({'content': self.postData }, function(data){ 
         console.log(data); 
        }); 
        self.greetingList.hello_collection.push(self.newGreeting); 
        self.postData = ""; 
       } 
       self.post = post; 

       function put() { 
        helloService.put({greetingId: self.updateId}, {'content': self.updateData }); 
        var newValue = self.updateData; 
        var greeting = helloService.get({greetingId: self.updateId}, function(data){ 
         data.content == newValue; 
         console.log(data); 
         console.log(data.content); 
        }); 
        console.log(greeting); 
        /** 
        for (var i = 0; i < self.greetingList.hello_collection.length; i++) 
         { 
          if(self.greetingList.hello_collection[i].greetingId == self.updateId){ 
           console.log(self.greetingList.hello_collection[i]); 
           self.greetingList.hello_collection[i].content = self.updateData; 
          } 
         } 
        **/ 
        self.updateId, self.updateData = "";        
       } 
       self.put = put; 

       function remove(deleteId) { 
        var greeting = helloService.get({greetingId: deleteId}) 
        for (var i = 0; i < self.greetingList.hello_collection.length; i++) { 
         if (self.greetingList.hello_collection[i]["id"] == deleteId) { 
          var index = i; 
          break; 
         } 
        } 
        if (index >= 0) { 
         self.greetingList.hello_collection.splice(index, 1); 
         helloService.remove({greetingId: deleteId}, function() { 
          greeting.$delete(); 
         });       
        }      
       } 
       self.remove = remove; 
       var greetingList; 
       function listAll() { 
        self.greetingList = helloService.listAll(); 
       } 
       self.listAll = listAll; 
       var newService = new helloService(); 
       newService.$save(); 

      } 
     ], 
     templateUrl: "./templates/hello.html", 

Answer 1

Основная проблема, которая породила указанную выше проблему, заключалась в том, что на первой странице все еще отображались удаленные (DELETE) данные после обновления страницы, а также после обновления (PUT) старый контент все еще отображался при загрузке страницы. Но я решить мою используя заголовки: { «Cache-Control»: «нет-кэша»}

angular.module('helloApp', ['ngResource']) 
    .factory("helloService", ['$resource', 
     function($resource) { 
      return $resource('/direct/hello/:greetingId.json', 
       { greetingId: '@greetingId' }, { 
       get: { 
        method: 'GET', 
        params: {greetingId: '@greetingId'}, 
        isArray: false, 
        headers: { "cache-control": "no-cache" } 
       }, 
       post: { 
        method: 'POST', 
        headers:{'Content-Type':'application/json; charset=UTF-8'}, 
       }, 
       put: { 
        method: 'PUT', 
        params: {greetingId: '@greetingId'}, 
        headers: { "cache-control": "no-cache" } 
       }, 
       remove: { 
        method: 'DELETE', 
        params: {greetingId: '@greetingId'} 
       }, 
       listAll: { 
        method: 'GET', 
        isArray: false, 
        headers: { "cache-control": "no-cache" } 
       }, 
      }); 
     } 
    ]) 

Answer 2

Я обновил свой компонент и услуг, чтобы сделать использование ресурсов $ сохранить() и $ resource.remove() следующим образом:.

Обновлено Служба

.factory("helloService", ['$resource', 
    function($resource) { 
    return $resource('/direct/hello/:greetingId.json', { 
     greetingId: '@greetingId' 
    }, { 
     get: { 
     method: 'GET', 
     params: { 
      greetingId: '@greetingId' 
     }, 
     isArray: false 
     }, 
     post: { 
     method: 'POST', 
     headers: { 
      'Content-Type': 'application/json; charset=UTF-8' 
     }, 
     }, 
     put: { 
     method: 'PUT', 
     params: { 
      greetingId: '@greetingId' 
     } 
     }, 
     remove: { 
     method: 'DELETE', 
     params: { 
      greetingId: '@greetingId' 
     } 

     }, 
     listAll: { 
     method: 'GET', 
     isArray: true // <-- this should be true as in a RESTFULL app the 
         //  listAll should expect array of objects as a 
         //  response i.e.: [{id:1,content:"..."}, 
         //  {id:2,content:"..."}] 
     }, 
    }); 
    } 
]); 

Обновленный компонент

.component('hello', { 
     controller: ['helloService', 
      function (helloService) { 
       var self = this; 

       function get() { 
        self.greeting = helloService.get({greetingId: self.getId}); 
       } 
       self.get = get; 

       function post() { 
        var greetingItem = new helloService(); 
        greetingItem.content = self.postData; 
        greetingItem.$save(); 
        self.greetingList.push(greetingItem); 
        self.postData = ""; 
       } 
       self.post = post; 

       function put() { 
        var greetingItem = helloService.get({greetingId: self.updateId}, function() { 
         greetingItem.content = self.updateData; 
         greetingItem.$save(); 
         console.log(greetingItem); 
         self.updateId = ""; 
         self.updateData = "";   
        }); 

       } 
       self.put = put; 

       function remove(deleteId) { 
        var greetingItem = helloService.get({greetingId: deleteId}, function(){ 
         for (var i = 0; i < self.greetingList.length; i++) { 
          if (self.greetingList[i].id == deleteId) { 
           var index = i; 
           break; 
          } 
         } 
         greetingItem.$delete({greetingId: deleteId}); 
         if (index >= 0) { 
          self.greetingList.splice(index, 1); 
         }      
        }); 
       } 
       self.remove = remove; 

       var greetingList = []; 
       function listAll() { 
        self.greetingList = helloService.listAll(); 
       } 
       self.listAll = listAll; 

      } 
     ], 
     templateUrl: "./templates/hello.html" 
});