无法在Angular Sign Up页面上创建新用户

时间:2015-09-19 17:51:35

标签: javascript angularjs api post

我正在尝试在Angular中创建一个新用户。我试图通过客户端向我的api发送POST请求以创建新用户。很遗憾,我无法成功发送帖子请求。通过Postman发送请求是成功的,但不是通过Angular。关于什么可能是问题的任何想法?任何帮助表示赞赏。

userCtrl.js

//./public/app/controllers/userCtrl.js

angular.module('userCtrl',['userService'])

  //SIGN UP CTRL ================================
  //inject the User factory
  .controller('userCreateController', function($location, User){
    var vm = this;

    //Function that creates a new user
    vm.saveUser = function(){
      //For spinner animation when signing up
      vm.processing = true;

      //Use the create funciton in the userService
      User.create(vm.userData)
        .then(function(data){
          if(data.success){
            $location.path('/login');
          }else {
            console.log('error');
            vm.processing = false;
          }
        })
    }//End saveUser

  })//End userCreateController

userService.js

//userService.js

angular.module('userService', [])

  .factory('User', function($http){
    //create a user factory object
    var userFactory = {};

    //get a single user
    userFactory.get = function(id){
      return $http.get('/api/users/' + id);
    };

    //get all users
    userFactory.all = function(){
      return $http.get('/api/users/');
    };

    //create a user
    userFactory.create = function(userData){
      return $http.post('/api/users/', userData);
    };

    //update a user
    userFactory.update = function(id, userData){
      return $http.put('/api/users/' + id, userData);
    };

    //delete a user
    userFactory.delete = function(id){
      return $http.delete('/api/users' + id);
    };

    //return userFactory object
    return userFactory;

  });

routes.js

//./public/app/routes.js

angular.module('appRoutes', ['ngRoute'])
  .config(function($routeProvider, $locationProvider){
    $routeProvider

    //homepage route
    .when('/',{
      templateUrl : 'app/views/pages/home.html'
    })

    .when('/login',{
      templateUrl: 'app/views/pages/login.html',
      controller: 'mainController',
      controllerAs: 'login'
    })

    .when('/signup',{
      templateUrl: 'app/views/pages/signup.html',
      controller: 'userCreateController',
      controllerAs: 'signup'
    })

    //Remove hash in the Url
    $locationProvider.html5Mode(true);
  })//End config

signup.html

<div class="row col-sm-6 col-sm-offset-3">
  <div class="jumbtron">
    <h1>Sign Up</h1>

    <!-- Sign Up Form -->
    <form ng-submit='signup.saveUser()'>

      <!-- Name Input -->
      <div class="form-group">
        <label>Name</label>
        <input type="text" class="form-control" placeholder="Enter Your Name" ng-model='signup.userData.name'>
      </div>

      <!-- Username Input -->
      <div class="form-group">
        <label>Username</label>
        <input type="text" class="form-control" placeholder="Enter Username" ng-model='signup.userData.username'>
      </div>

      <!-- Password Input -->
      <div class="form-group">
        <label>Password</label>
        <input type="password" class="form-control" placeholder="Enter Password" ng-model='signup.userData.password'>
      </div>


      <!-- Signup Button -->
      <button type="submit" class="btn btn-block btn-success">
        <!-- Show SignUP -->
        <span ng-if="!signup.processing">Sign Up</span>
        <!-- Show spinner animation when signing up -->
        <span ng-if="signup.processing" class="spinner">
          <span class="glyphicon glyphicon-repeat"></span>
        </span>
      </button>

    </form>
    <!-- End Sign Up Form -->
  </div>

</div>

0 个答案:

没有答案