2017-02-17 2 views
0

코드가 제대로 작동했습니다. 로그인을위한 몇 가지 새로운 기능을 추가하고 그것을 고장 냈습니다. 그래서 코드를 삭제했습니다. 이것은 원래 형식이지만 오류는 계속 남아 있습니다. 사용자 서비스의 작성 기능은 기능이 아닙니다.. 주제에 대한 많은 질문을 읽었지만 답변이 도움이되지 않았습니다.TypeError : Users.create가 함수가 아닙니다.

UserController

todoApp.controller('UserController', ['Users','$scope', function UserController(Users, $scope) { 
    console.log("in user controller"); 

    $scope.formModel = {}; 
    $scope.submitting = false; 
    $scope.submitted = false; 
    $scope.has_error = false; 

    console.log($scope.formModel); 
    $scope.createUser = function() { 
     if(!$scope.registerForm.$valid) { 
      return; 
     } 
     Users.create($scope.formModel) 
     .success(function(data){ 

      $scope.submitting = false; 
      $scope.submitted = true; 
      $scope.has_error = false; 
      $scope.formModel = {}; // clear the form so our user is ready to enter another 
      $scope.users.push(data); 
      console.log(":)"); 
     }).error(function(data) { 
      console.log(":("); 
      $scope.submitting = false; 
      $scope.submitted = false; 
      $scope.has_error = true; 
     }); 


    }; 

}]); 

user.sevice.js

todoApp.factory('Users', ['$http', function($http) { 
    return { 
     get: function() { 
      return $http.get('/api/users'); 
     }, 

     create: function(userData) { 
      console.log(userData); 
      return $http.post('/api/users', userData); 
     }, 

     delete: function(id) { 
      return $http.delete('/api/users/' + id); 
     }, 

     update: function(userData) { 
      return $http.put('/api/users/' + userData.id, userData); 
      console.log(userData); 
     } 
    } 
}]); 

경우 상기 제공 register.html

<div class="container"> 

    <div class="row main" ng-controller="UserController"> 
     <div class="main-login main-center"> 
     <h5>Sign up once for instant access.</h5> 
      <form name="registerForm" ng-submit="createUser()" 
       novalidate="novalidate" 
       ng-hide="submitted" > 

       <div class="form-group"> 
        <label for="name" class="cols-sm-2 control-label">Your Name</label> 
        <div class="cols-sm-10"> 
         <div class="input-group"> 
          <span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span> 
          <input type="text" 
           class="form-control" 
           ng-model="formModel.name" 
           id="name" 
           placeholder="Enter your Name" 
           required="required" /> 
         </div> 
        </div> 
       </div> 

       <div class="form-group"> 
        <label for="email" class="cols-sm-2 control-label">Your Email</label> 
        <div class="cols-sm-10"> 
         <div class="input-group"> 
          <span class="input-group-addon"><i class="fa fa-envelope fa" aria-hidden="true"></i></span> 
          <input type="email" 
           class="form-control" 
           ng-model="formModel.email" 
           id="email" 
           placeholder="Enter your Email" 
           required="required" /> 
         </div> 
        </div> 
       </div> 

       <div class="form-group"> 
        <label for="username" class="cols-sm-2 control-label">Username</label> 
        <div class="cols-sm-10"> 
         <div class="input-group"> 
          <span class="input-group-addon"><i class="fa fa-users fa" aria-hidden="true"></i></span> 
          <input type="text" 
           class="form-control" 
           ng-model="formModel.username" 
           id="username" 
           placeholder="Enter your Username" 
           required="required" /> 
         </div> 
        </div> 
       </div> 

       <div class="form-group"> 
        <label for="password" class="cols-sm-2 control-label">Password</label> 
        <div class="cols-sm-10"> 
         <div class="input-group"> 
          <span class="input-group-addon"><i class="fa fa-id-badge" aria-hidden="true"></i></span> 
          <input type="password" 
           class="form-control" 
           ng-model="formModel.password" 
           id="password" 
           placeholder="Enter your Password" 
           required="required" /> 
         </div> 
        </div> 
       </div> 

        <label for="confirm" class="cols-sm-2 control-label">Confirm Password</label> 
        <div class="cols-sm-10"> 
         <div class="input-group"> 
          <span class="input-group-addon"><i class="fa fa-lock fa-lg" aria-hidden="true"></i></span> 
          <input type="password" 
          class="form-control" 
          name="confirm" 
          id="confirm" 
          placeholder="Confirm your Password" 
          required="required" /> 
         </div> 
        </div> 
       </div> 

       <div class="form-group" > 
        <label for="type" class="cols-sm-2 control-label">User Type</label > 
        <div class="cols-sm-10"> 
         <span class="input-group-addon"><i class="fa fa-university" aria-hidden="true"></i></span> 
         <select id="type" 
             class="form-control" 
             ng-model="formModel.role" 
             required="required" > 
          <option value="" >Please Choose</option > 
          <option value="1" >Lecturer</option > 
          <option value="2" >Student</option > 
         </select > 
        </div> 
       </div > 
       <div> 
        <button class="btn btn-primary" 
          ladda="submitting" 
          data-style="expand-right" 
           type="submit"> 
         <span ng-show="submitting">Registering</span> 
         <span ng-show="!submitting">Register</span> 
        </button> 
       </div>   
      </form> 
     </div> 
    </div> 
</div> 

답변

1

당신은 오히려 서버에서 HTTP 원시 약속을 돌아보다 값이 콜백을 반환해야합니다. 이

서비스를 시도

create: function(userData, callback) { 
     $http.post('/api/users', userData).then(function (res) { 
      return callback(res.data); 
     }, 'error') 
}, 

컨트롤러 성공을 위해 사용되지 않습니다 //

각도 1.5>

서버에서

// 성공 코드 리턴 (이것은 실제 오류가 아닙니다 코드는 404와 500을 좋아한다. 이것은 서버에서 제공 한 코드 일 뿐이다) - 서버가 성공을 위해 json 형식을 리턴한다고하자. - {code : '0000', remark : 'Success'}와 err 또는 - {code : '9999', 발언 : 'Success'}. 이것은 서버에 따라 다릅니다. 이것은 내가 이전 프로젝트에서 수행 한 작업입니다.

$scope.createUser = function() { 
    if(!$scope.registerForm.$valid) { 
     return; 
    } 
    Users.create($scope.formModel, function (res) { 
     switch (res.code) { 
      case '0000': 
       $scope.submitting = false; 
       $scope.submitted = true; 
       $scope.has_error = false; 
       $scope.formModel = {}; // clear the form so our user is ready to enter another 
       $scope.users.push(data); 
     console.log(":)"); 
       break; 
      case '9999': 
       console.log(":("); 
       $scope.submitting = false; 
       $scope.submitted = false; 
       $scope.has_error = true; 
       console.log('error'); 
       break; 
     } 
    }); 
}; 

서버에서 오류 코드와 데이터 만 반환한다고 가정 해 보겠습니다. 이런 식으로 할 수 있습니다

$scope.createUser = function() { 
    if(!$scope.registerForm.$valid) { 
     return; 
    } 
    Users.create($scope.formModel, function (res) { 
     if (res !== undefined) {   
       $scope.submitting = false; 
       $scope.submitted = true; 
       $scope.has_error = false; 
       $scope.formModel = {}; // clear the form so our user is ready to enter another 
       $scope.users.push(data); 
     } else { 
       console.log(":("); 
       $scope.submitting = false; 
       $scope.submitted = false; 
       $scope.has_error = true; 
       console.log('error'); 
     } 
     } 
    }); 
+0

그것은 치료를했습니다. 지금까지 답변을 드리지 않아서 죄송합니다. 질문을 한 후 컴퓨터를 사용하지 않았습니다. 성공을 위해 'xxxx'의 경우 403 또는 200과 같은 http 응답 번호로 채워야합니까? –

+0

성공의 경우입니다. 즉, http 응답 200 만 해당됩니다. http 게시를 닫기 전에 'http'오류에서 다른 http 오류 코드를 찾을 수 있습니다. – digit

+0

'0000'의 경우와 '9999'의 경우가 다소 혼란 스럽습니다. 0000보다 크고 9999보다 작은 http 응답을 잡는다는 의미입니까? –

0

D 코드가 정확하다면 코드에 문제가 없습니다. 참조가 누락되었을 수 있습니다. 내 플 런커를 확인하십시오. 코드가 api까지 호출합니다. 내 쿵하는 소리의

콘솔 창

in user controller 
VM413 app.js:11 Object {}__proto__: Object 
VM413 app.js:13 create called!! 
VM413 app.js:45 create method on factory called!! 
VM413 app.js:46 Object {name: "Kalyan", email: "[email protected]", username: "tee", password: "tet", role: "1"} 
VM411 angular.min.js:105 POST https://run.plnkr.co/api/users 400() 

Click here to see my plunk

+0

당신의 plunker에서 확실히 작동합니다. 어떤 참고 문헌도 참조 할 것입니다. –

관련 문제