文档章节

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

开源中国匿名会员
 开源中国匿名会员
发布于 2015/02/01 15:50
字数 578
阅读 73
收藏 0

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

© 著作权归作者所有

开源中国匿名会员
粉丝 78
博文 104
码字总数 113453
作品 2
徐汇
技术主管
私信 提问
AngularJS+Satellizer+Node.js+MongoDB->Instagram-20

[Build an Instagram clone with AngularJS, Satellizer, Node.js and MongoDB][1] 20.部署 在 instagrame 目录下创建一个新的文件 .gitignore,把 node_modules 加到它里面。你可以直接用命......

开源中国匿名会员
2015/02/02
0
0
AngularJS+Satellizer+Node.js+MongoDB->Instagram-21

[Build an Instagram clone with AngularJS, Satellizer, Node.js and MongoDB][1] 21.总结 完结撒花!这是我那些年写过的最长的贴了。搞笑的是,我在 [TV Show Tracker blog post][2] 里面也...

开源中国匿名会员
2015/02/02
0
0
上传一张照片,让算法告诉你是否患有抑郁症

机器学习再次于医疗界刷存在感! 近日,哈佛大学的Andrew Reece和佛蒙特大学的Christopher Danforth合作开发了一种算法,该算法能通过分析一个人发布在Instagram的照片,判定这个人是否有抑郁...

行者武松
2018/03/14
0
0
day78-20180905-流利阅读笔记

还在瞎吃明星的安利?英国开始调查大 V 推广啦 Lala 2018-09-05 1.今日导读 无论是国内还是国外,越来越多的品牌都开始启用社交网络进行产品宣传。其中,明星和博主的推荐最为吸引眼球。与此...

飞鱼说编程
2018/09/05
0
0
日本公司推出云平台STYLY,零基础低配置也能开发VR内容

商家可为自家的产品制作VR广告,比如用于店面推广、促销展览、新品发布等方面。 不少人对虚拟现实内容的开发感兴趣,可现实是他们不仅缺乏相关经验,而且没有可运行VR的PC。最近,日本公司P...

行者武松
2018/03/07
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Jenkins系列_插件安装及报错处理

进入Jenkins之后我们可以进行插件的安装,插件管理位于以下模块: 发现上面报了一堆错误,是因为插件的依赖没有安装好,那么这一节,就先把这些错误解决掉吧。解决完成后,也就基本会使用插件...

shzwork
今天
2
0
mysql mysql的所有查询语句和聚合函数(整理一下,忘记了可以随时看看)

查询所有字段 select * from 表名; 查询自定字段 select 字段名 from 表名; 查询指定数据 select * from 表名 where 条件; 带关键字IN的查询 select * from 表名 where 条件 [not] in(元素...

edison_kwok
昨天
8
0
多线程同时加载缓存实现

import com.google.common.cache.Cache;import com.google.common.cache.CacheBuilder;import java.util.concurrent.ExecutionException;import java.util.concurrent.ExecutorServi......

暗中观察
昨天
3
0
利用VisualVM 内存查看

准备工作,建几个测试类。等下就是要查看这几个类里面的属性 package visualvm;public class MultiObject { private String str; private int i; MultiObject(String str...

冷基
昨天
2
0
组装一台工作游戏两用机

一、配置清单如下: 分类 项目 价格(元) 主板 华硕(ASUS)TUF Z370-PLUS GAMING II 电竞特工 Z370二代 支持9代CPU 1049 CPU 英特尔(Intel) i7 8700K 酷睿六核 盒装CPU处理器 2640 风扇 九...

mbzhong
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部