Angular.js：使用“ .then”并获得响应

Question

I want send a http request and get response of this request. I want if data is save, I get database information and if doesn't save, I get errors. For this, I want use .then in angularjs. I create angularjs controller and services to do this. I have below code in angularjs part:

bolouk.js :

'use strict';
var app = angular.module('app');
app.controller('BoloukCtrl', ['$scope', 'Bolouks', function($scope, Bolouks){
$scope.save = function(){
        Bolouks.create($scope.bolouk).then(function(data){
        $scope.saveBolouk = data;
        },function(err){
                $scope.err = err;
            }
        );
    };
}]);

boloukService.js :

'use strict';
var app = angular.module('boloukService', ['ngResource']);
app.factory('Bolouks', function($resource) {
    return $resource('/api/bolouks.json', {}, {
        create: { method: 'POST', isArray: false }
    });
});

and I have below code in rails server: bolouks_controller.rb :

  def create
    @bolouk = Bolouk.create(bolouk_params)
    if @bolouk.valid?
      #@bolouk.save
      respond_with @bolouk, :location => api_bolouks_path
    else
      respond_with @bolouk.errors, :location => api_bolouks_path
    end
  end
  private
  def bolouk_params
    params.require(:bolouk).permit(:boloukcode, :north, :south, :east, :west)
  end

Request send to rails server correctly and data is save to database right, but I cannot get response of request and when I run function`, I get below error in chrome console:

TypeError: undefined is not a function
    at Scope.$scope.save (http://localhost:3000/assets/controllers/bolouk.js?body=1:19:39)
    at http://localhost:3000/assets/angular.js?body=1:10973:21
    at http://localhost:3000/assets/angular.js?body=1:20088:17
    at Scope.$eval (http://localhost:3000/assets/angular.js?body=1:12752:28)
    at Scope.$apply (http://localhost:3000/assets/angular.js?body=1:12850:23)
    at HTMLFormElement.<anonymous> (http://localhost:3000/assets/angular.js?body=1:20087:21)
    at HTMLFormElement.jQuery.event.dispatch (http://localhost:3000/assets/templates/jquery-1.10.2.js?body=1:4627:9)
    at HTMLFormElement.elemData.handle (http://localhost:3000/assets/templates/jquery-1.10.2.js?body=1:4295:46) 

I think I don't use .then correctly in angularjs controller, I check $q method too, but again get this error. Any one have idea to solve this problem?

Answer 1

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


app.controller('BoloukCtrl', ['$scope', 'Bolouks', function($scope, Bolouks){
    $scope.save = function(){
        var user = Bolouks.get();
        user.get(function(resp) {
            //request successful
        }, function(err) {
            //request error
        });
    };
}]);

angular.module('boloukService', ['ngResource']);
    app.factory('Bolouks', function($resource) {
    var savedData = {}

    function get() {
        return  $resource('/api/bolouks.json', {}, {
            create: { method: 'POST', isArray: false}
        });
    }
    return {
        get: get
    }
});

try this one :)

Answer 2

you have assign both module in same variable. this may conflict your code. so use this code:

bolouk.js:

'use strict';
var app = angular.module('app',['ngResource']);
app.controller('BoloukCtrl', ['$scope', 'Bolouks', function($scope, Bolouks){
$scope.save = function(){
        Bolouks.create($scope.bolouk).$promise.then(function(data){
        $scope.saveBolouk = data;
        })
        .catch(function (err) {
          console.log(err);

      })
    };
}]);

boloukService.js:

'use strict';

app.factory('Bolouks', function($resource) {
    return $resource('/api/bolouks.json', {}, {
        create: { method: 'POST', isArray: false }
    });
});