Skip to content

Instantly share code, notes, and snippets.

@jcolemorrison jcolemorrison/signup.html
Last active Aug 29, 2015

Embed
What would you like to do?
Building an Angular and Express App Part 2 - Signup route updated
<div class="signup-container">
<div class="col-md-12">
<h3 class="signup-header">Signup as a New User</h3>
<hr>
<br>
</div>
<div class="signup-form">
<form class="form-horizontal">
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="firstname">First Name</label>
<div class="col-md-5">
<input id="firstname" name="firstname" ng-model="signup.user.firstname" type="text" placeholder="Cole" class="form-control input-md">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="lastname">Last Name</label>
<div class="col-md-5">
<input id="lastname" name="lastname" ng-model="signup.user.lastname" type="text" placeholder="Morrison" class="form-control input-md">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="email">Email</label>
<div class="col-md-5">
<input id="email" name="email" ng-model="signup.user.email" type="text" placeholder="me@jcolemorrison.com" class="form-control input-md">
</div>
</div>
<!-- Password input-->
<div class="form-group">
<label class="col-md-4 control-label" for="password1">Password</label>
<div class="col-md-5">
<input id="password1" name="password1" ng-model="signup.user.password1" type="password" placeholder="" class="form-control input-md">
</div>
</div>
<!-- Password input-->
<div class="form-group">
<label class="col-md-4 control-label" for="password2">Retype Password</label>
<div class="col-md-5">
<input id="password2" name="password2" ng-model="signup.user.password2" type="password" placeholder="" class="form-control input-md">
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="signup"></label>
<div class="col-md-5">
<button ng-click="signup.submit()" id="signup" name="signup" class="btn btn-success btn-block">Signup!</button>
</div>
</div>
</form>
</div>
</div>
'use strict';
angular.module('clientApp') // make sure this is set to whatever it is in your client/scripts/app.js
.controller('SignupCtrl', function ($scope, $http) { // note the added $http depedency
// Here we're creating some local references
// so that we don't have to type $scope every
// damn time
var user,
signup;
// Here we're creating a scope for our Signup page.
// This will hold our data and methods for this page.
$scope.signup = signup = {};
// In our signup.html, we'll be using the ng-model
// attribute to populate this object.
signup.user = user = {};
// This is our method that will post to our server.
signup.submit = function () {
// make sure all fields are filled out...
// aren't you glad you're not typing out
// $scope.signup.user.firstname everytime now??
if (
!user.firstname ||
!user.lastname ||
!user.email ||
!user.password1 ||
!user.password2
) {
alert('Please fill out all form fields.');
return false;
}
// make sure the passwords match match
if (user.password1 !== user.password2) {
alert('Your passwords must match.');
return false;
}
// Just so we can confirm that the bindings are working
console.log(user);
// Make the request to the server ... which doesn't exist just yet
var request = $http.post('/signup', user);
// we'll come back to here and fill in more when ready
request.success(function (data) {
// to be filled in on success
});
request.error(function (data) {
// to be filled in on error
});
};
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.