angularjs two way data binding with spring ,mybatis and restful services

Question

i am developing an angulatJS application with CURD operations.

here in my application i will create,edit and delete records ! i can able to do that but i was not able to bind the data in model, for that i need restart the browser to see the updates.

here is my code ... any inputs will be greatly appreciated.

this is my main js

angular.module('serviceClient', ['serviceClient.services','serviceClient.controllers','ngRoute']).
    config(['$routeProvider', function ($routeProvider) {
        $routeProvider.when('/home', {templateUrl: 'pages/home.html'});
        $routeProvider.when('/testcases-list', {templateUrl: 'pages/testlist.html', controller: 'serviceCtrl'});
        $routeProvider.when('/test-edit/:id', {templateUrl: 'pages/test-details.html', controller: 'TCDetailCtrl'});
        $routeProvider.when('/testcases-creation', {templateUrl: 'pages/testcases-creation.html', controller: 'TCCreationCtrl'});
        $routeProvider.otherwise({redirectTo: '/home'});
        
      }]);

'use strict';

var app = angular.module('serviceClient.controllers', []);



app.run(function ($rootScope, $templateCache) {
    $rootScope.$on('$viewContentLoaded', function () {
        $templateCache.removeAll();
    });
});


//list
app.controller('serviceCtrl', [ 'DemoService','DemoService2', '$scope', '$location',
  function(DemoService,DemoService2, $scope, $location) {
 
   $scope.editTestCase= function(userId) {
    $location.path('/test-edit/'+userId);
   };

   $scope.deleteTestCase = function(userId) {
    DemoService2.remove({ id: userId });
    
   };

   $scope.createNewTestCase = function() {
    $location.path('/testcases-creation');
   };

   DemoService.query(function(DemoService) {
    $scope.response = DemoService;
   });

  } ]);

//create
app.controller('TCCreationCtrl', [ '$scope', 'DemoService', '$location',
  function($scope, DemoService, $location) {
    $scope.createNewTestCase = function() {
    DemoService.create($scope.testCase);
    $location.path('/testcases-list');
    
    }
  } ]);

//update
app.controller('TCDetailCtrl', [ '$scope', '$routeParams', 'DemoService2',
  '$location', function($scope, $routeParams, DemoService2, $location) {
   //alert("update");
   $scope.updateTestCase = function() {
    DemoService2.update($scope.testCase);
    $location.path('/testcases-list');
   };
   
   $scope.cancel = function() {
   $location.path('/testcases-list');
   };

   $scope.testCase = DemoService2.show({
   id : $routeParams.id
   });
   
  } ]);

'use strict';

var app = angular.module('serviceClient.services', [ 'ngResource' ]);


app.factory('DemoService', function($resource) {
 return $resource('http://localhost:8080/', {}, {
  query : {method : 'GET',params : {},isArray : true},
  create: {method: 'POST'}
 });
});


app.factory('DemoService2', function($resource) {
 return $resource('http://localhost:8080/:id', {}, {
  show: { method: 'GET' },
  update: { method: 'PUT', params: {id:'@id'} },
  remove:{method: 'DELETE',params: {id:'@id'} }
 });
});

here if made any insert/update/delete operation i want to see immediately in front end as well as backend.

i tried reload , $promise ... but i blocked some where !

Thanks

What do you mean by if made any insert/update/delete : do you mean that when the current connected user perform one of those operations, you don't see them or when the other user do so ? — Walfrat, Feb 26 '16 at 07:54
Yes , if i insert a record , i want to see frontend should be reload that record. — ajay, Feb 26 '16 at 12:37

score 0 · Answer 1 · answered Feb 29 '16 at 07:59

For your answer of my comment i'll that "i" will just be the current connected user, and not another connected user.

You have two way of doing this :

Reload the page. Easy but will trigger lot of not so necessary requests to the server.
Add the item to the list once the server succesfully added in the database for this you have to use the $promise field of a resource :

DemoService.create($scope.testCase).$promise.then(function(){
    $scope.myDatas.push($scope.testCase);
});

You said that you tryed $promise, if this isn't working for you, please open your debug console in your browser and show us what is the request sent to the server when you try to create an element and what is the server's answer.

angularjs two way data binding with spring ,mybatis and restful services

1 Answers1