I've put together a basic form structured like this:
Here's the controller code:
angular.module('clientApp')
.controller('SignupCtrl', function ($scope, $http, $log, alertService, $location, userService) {
$scope.signup = function() {
var payload = {
email : $scope.email,
password : $scope.password
};
$http.post('app/signup', payload)
.error(function(data, status) {
if(status === 400) {
angular.forEach(data, function(value, key) {
if(key === 'email' || key === 'password') {
alertService.add('danger', key + ' : ' + value);
} else {
alertService.add('danger', value.message);
}
});
}
if(status === 500) {
alertService.add('danger', 'Internal server error!');
}
})
};
});
My view template looks like this:
<form name="signupForm" ng-submit="signup()" novalidate>
<div>
<label for="email">Email</label>
<input name="email" class="form-control" type="email" id="email" placeholder="Email"
ng-model="email">
</div>
<div>
<label for="password">Password</label>
<input name="password" class="form-control" type="password" id="password"
placeholder="Password" ng-model="password">
</div>
<button type="submit" class="btn btn-primary">Sign up!</button>
</form>
And this is what my index file contains:
//js files
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
Here is my app.js:
angular
.module('tripApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
'ui.bootstrap'
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl',
controllerAs: 'main'
})
.when('/signup', {
templateUrl: 'views/signup.html',
controller: 'SignupCtrl'
})
.otherwise({
redirectTo: '/'
});
});
When I attempt a post request, I receive a 304 GET response instead of the expected POST response. Additionally, the input characters are being appended to the site URL, which is undesired behavior for a POST request. Any suggestions on how to address this issue would be greatly appreciated.