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

原创
2015/02/01 15:50
阅读数 90

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.loginRoutenull 来禁用。

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

https://hackhands.com/wp-content/uploads/2014/10/Screenshot-2014-10-28-21.47.32.png

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

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部