AngularJS+Satellizer+Node.js+MongoDB->Instagram-06-优快云博客

本文介绍如何使用AngularJS、Satellizer、Node.js和MongoDB构建Instagram克隆的应用程序。文章详细解释了主页的设计与实现过程，包括用户认证、图片展示等功能。

2019独角兽企业重金招聘Python工程师标准>>>

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

#6.Home 页面

创建两个新的文件夹，controllers 和 views，在 controllers 里面增加下面这些文件:

detail.js
home.js
login.js
navbar.js
signup.js

在 views 文件夹里面创建如下 HTML 文件:

detail.html
home.html
login.html
signup.html

注意: navbar.js controller 没有模板。我们会在 index.html 里面直接放 Navbar，用于处理 logout 动作和其他一些事情。

我们需要在 index.html 里面把 controllers 的 JavaScript 文件全部加载进来。

打开 views/home.html 模板，把下面代码贴进去:

<!-- lang: html -->
<div class="container">
 
  <div ng-if="isAuthenticated() && currentUser.username">
    <div class="row">
      <div ng-repeat="photo in photos" class="col-lg-2 col-sm-3 col-xs-4">
        <a href="#/photo/{{photo.id}}">
          <img ng-src="{{photo.images.standard_resolution.url}}" class="thumbnail img-responsive">
        </a>
      </div>
    </div>
  </div>
 
  <div ng-if="!isAuthenticated()">
    <div class="jumbotron">
      <h2><i class="ion-images"></i> Instagram</h2>
      <p>This is a basic Instagram clone powered by <strong>Satellizer</strong>. To continue, please log in with your Instagram account or create a new email account.</p>
      <p>
        <a class="btn btn-lg btn-success" href="#/login"><i class="ion-log-in"></i> Log in</a>
        <a class="btn btn-lg btn-primary" href="#/signup"><i class="ion-person-add"></i> Create account</a>
      </p>
    </div>
  </div>
 
  <div ng-if="isAuthenticated() && !currentUser.username" class="center-form panel">
    <div class="panel-body">
      <h5 class="text-center"><i class="ion-link"></i> Link Account</h5>
      <p>To complete the registration process you must link your Instagram account.</p>
      <button class="btn btn-block btn-instagram" ng-click="linkInstagram()">
        <i class="ion-social-instagram"></i> Sign in with Instagram
      </button>
    </div>
  </div>
 
</div>

这个模板有三个主要部分:

用户通过 Email 或者 OAuth 2.0 认证，并且有一个有效的 Instagram 用户名。 也就是说，用户通过 Instagram 登录成功或者用户用Email创建了一个帐号，并且后来把它和 Instagram 帐号链接起来了。
**用户没有通过认证。**这是来访者第一次看到的画面。
用户通过 Email 认证成功但是没有一个有效的 Instagram 用户名这种情况下，帐号必须和 Instagram 链接起来，否则不能继续。

注意: 我用 Instagram 用户名作为唯一标识符来确定用户是否登录了 Instagram 以及该应用是否被认证。

毋庸置疑如果我只用 Instagram 认证的话会让一切都变得简单，但是我想演示的是如何处理帐号链接和在后台是如何合并帐号的，因为这是一个常见的问题。

让我们一行行来分解它。 ng-if 属性是个特殊 Angular 指令，它可以根据条件渲染特定的 HTML 块。如果 ng-if 的表达式结果是 false，那么该元素会被从 DOM 移除，否则会重新克隆加回到 DOM 中。

ng-repeat 则是另外一个 Angular 指令，可以看成是为 Angular 模板设计的 for-each 循环。和 Handlebars 或 Jade 模板的循环不同，它们需要你 wrap the for loop around the element，在 Angular 的 ng-repeat 中，它会遍历指令所定义的元素本身。

为了在循环中能用绑定，我们需要在 <img> 上用 ng-src 来取代 ** {{photo.images.standard_resolution.url}}**。 Angular 会自动处理表达式然后插入正确的值。

你也许已经注意到了诸如 isAuthenticated(), linkInstagram() 和 currentUser 这样的表达式，这些方法和对象是我们下一章将要在 HomeCtrl 中创建的。

注意: 不要忘记了在 href 路径中使用 hash，比如 #/login 而不是 /login。除非你用的是 HTML5 历史 API (pushState)，否则这就是必须的。但是这不是简单的添加一行代码的问题，为了能用，你需要一个 web 服务，在后台来重写规则或者页面重定向。

打开 controllers/home.js 把下面的代码贴进去(我们会在下一章实现这些方法):

<!-- lang: js -->
angular.module('Instagram')
  .controller('HomeCtrl', function($scope) {
 
    $scope.isAuthenticated = function() {
      // check if logged in
    };
 
    $scope.linkInstagram = function() {
      // connect email account with instagram
    };
 
  });

讲解 Angular controller，我不觉得我能比 Todd Motto 做得更好，参考他的 AngularJS guide。这篇文章是所有 AngularJS 新手入门应该看的第一篇文章。我觉得它居然没被放在 https://angularjs.org 到底是跟他们有多大仇多大恨。

刷新浏览器，然后你会看到如下页面: