AngularJS+Satellizer+Node.js+MongoDB->Instagram-09

Build an Instagram clone with AngularJS, Satellizer, Node.js and MongoDB

9.Signup 页面

打开 signup.html 模板把下面的内容复制进去:

<!-- lang: js -->
<div class="container">

  <div class="center-form panel">
    <div class="panel-body">
      <h4 class="text-center"><i class="ion-person-add"></i> Sign up</h4>
      <form method="post" ng-submit="signup()" name="signupForm">
        <div class="form-group has-feedback" ng-class="{ 'has-error' : signupForm.email.$invalid && signupForm.email.$dirty }">
          <input class="form-control input-lg" type="text" id="email" name="email" ng-model="email" placeholder="Email" required>
          <span class="ion-at form-control-feedback"></span>
        </div>

        <div class="form-group has-feedback" ng-class="{ 'has-error' : signupForm.password.$invalid && signupForm.password.$dirty }">
          <input class="form-control input-lg" type="password" name="password" ng-model="password" placeholder="Password" required>
          <span class="ion-key form-control-feedback"></span>
        </div>

        <p class="text-center text-muted"><small>By clicking on Sign up, you agree to <a href="#">terms & conditions</a> and <a href="#">privacy policy</a></small></p>

        <button type="submit" class="btn btn-block btn-primary">Sign up</button>
        <br/>

        <p class="text-center text-muted"><small>Already have an account? <a href="#/login">Log in now</a></small></p>
      </form>
    </div>
  </div>

</div>

这个模板和 Login 页面类似。在 form 的提交中，我们执行 signup() 方法，它会抓取 email 和 password 的值然后发送到服务端。

把下面的代码敲/复制到 controllers/signup.js:

<!-- lang: js -->
angular.module('Instagram')
  .controller('SignupCtrl', function($scope, $auth) {

    $scope.signup = function() {
      var user = {
        email: $scope.email,
        password: $scope.password
      };

      // Satellizer
      $auth.signup(user)
        .catch(function(response) {
          console.log(response.data);
        });
    };

  });

Satellizer 的 $auth.signup() 方法仅仅是拿到一个对象之后把它传到服务端，而没有任何处理。这里传过去的对象，你会在服务端的 /auth/signup(默认 URL)拿到。

注意: 如果你希望用 /register 端点来代替 /auth/signup 你只需要简单的重写一下 signup URL:
$authProvider.signupUrl = ‘/register';

我还要指出一点就是 Satellizer 注册成功之后的默认行为是帮你登录。如果你不喜欢这个流程，那么你可以把它关掉:

<!-- lang: js -->
$authProvider.loginOnSignup = false;

如果你禁用自动登录，Satellizer 把用户重定向到在 $authProvider.loginRoute 中指定的 /login 路由。如果出于某些原因，你需要在重定向到登录界面之前做写什么处理，你可以通过设置 $authProvider.loginRoute 为 null 来禁用。

当你刷新浏览器之后，点击 Navbar 上的 Signup 你会看到如下界面:

好了，到这里我们换下口味，切到后端。我们这里会采用 Node.js 和 Express ，因为我最熟悉了，希望你也一样。其实代码是很简单的，你可以轻易的把它移植到其他你熟悉的 web 框架上。比如说，我有给 Satellizer 写过 PHP and Python examples。