文档章节

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

开源中国匿名会员
 开源中国匿名会员
发布于 2015/02/02 07:53
字数 767
阅读 58
收藏 0

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

#17.Detail 页面

还有一个重要部分没有实现就是这个一张照片的详细页面了 – 为每张照片设置一个独立的页面,包含放大的图片,说明,吐槽,点赞数量。

创建一个新的模板 views/detail.html 内容如下:

<!-- lang: js -->
<div class="container">
 
  <div class="panel panel-default">
    <div class="panel-body">
      <div class="row">
 
        <div class="col-xs-6">
          <img ng-src="{{photo.images.standard_resolution.url}}" class="img-responsive">
        </div>
 
        <div class="col-xs-6">
          <div class="caption">
            <h5><a href="http://instagram.com/{{photo.user.username}}">{{photo.user.username}}</a></h5>
            <h6 class="text-muted"><i class="ion-clock"></i> {{photo.created_time * 1000 | date:'short'}}</h6>
 
            <p>{{photo.caption.text}}</p>
 
          </div>
        </div>
 
      </div>
 
      <div class="row">
 
        <div class="col-xs-12">
          <h5><i class="ion-heart text-danger"></i> {{photo.likes.count}} likes</h5>
 
          <hr class="soften">
          <h5 class="text-center"><i class="ion-chatbox-working text-primary"></i> Comments</h5>
 
          <ul class="media-list">
            <li ng-repeat="comment in photo.comments.data" class="media">
              <a class="pull-left" href="http://instagram.com/{{comment.from.username}}">
                <img class="media-object img-rounded" ng-src="{{comment.from.profile_picture}}">
              </a>
              <div class="media-body">
                <a class="media-heading" href="http://instagram.com/{{comment.from.username}}">@{{comment.from.username}}</a>
                {{comment.text}}
              </div>
            </li>
            <li ng-if="!photo.comments.data.length">No comments</li>
          </ul>
 
          <hr class="soften">
 
          <div class="btn-group">
            <button class="btn" ng-class="{ 'btn-danger': hasLiked, 'btn-default': !hasLiked }" ng-click="like()">
              <i class="ion-heart" ng-class="{ 'text-danger': !hasLiked}"></i>
              <span ng-if="hasLiked">Liked</span>
              <span ng-if="!hasLiked">Like</span>
            </button>
          </div>
 
        </div>
      </div>
 
    </div>
  </div>
 
</div>

这个模板通篇没有撸点,因为这里面都没什么新概念值得去提了。里面有很多 Bootstrap 的 classe 把页面打扮的漂漂亮亮的,不过也就那样了。

如果你刷新浏览器,然后点其中一张缩略图,然后你就能看到新创建的这个模板了。不过,因为我们没有给这个页面创建 controller 来获取数据,所以它还什么都没有。

https://hackhands.com/wp-content/uploads/2014/11/Screenshot-2014-11-25-21.58.08.png

controllers 目录,创建一个新的文件叫做 detail.js。它的主要职责是处理 <em>Like</em> 动作和获取媒体数据的。

<!-- lang: js -->
angular.module('Instagram')
.controller('DetailCtrl', function($scope, $rootScope, $location, API) {

  var mediaId = $location.path().split('/').pop();

  API.getMediaById(mediaId).success(function(media) {
    $scope.hasLiked = media.user_has_liked;
    $scope.photo = media;
  });

  $scope.like = function() {
    $scope.hasLiked = true;
    API.likeMedia(mediaId).error(function(data) {
      sweetAlert('Error', data.message, 'error');
    });
  };
});

注意我是怎样的把 Instagram 媒体 id 从 URL 路径剥离开来并把它传到 API.getMediaById(mediaId) 的。当我们点击缩略图被引导到详细页面的时候,我们知道这张图的 id,所以锚点是这样的:

<!-- lang: js -->
<a href="#/photo/{{photo.id}}">

但当我们直接访问的时候,比如说,直接访问 http://localhost:8000/#/photo/861959103308715759_787132 或者刷新页面的时候,我们就拿不到 $scope.photos,因为它是 HomeCtrl controller 的一部分,而只在 home 页面 (“/” 路由)。

第二个方法,$scope.like(),这有一个临时变量叫做 hasLiked,如果被设为 true 它会把心形标签♥设为红色并把 Like 变成 Liked。看看上面的 detail.html 模板。假如发生了异常,比如达到了 API 请求次数限制,一个漂亮的消息框就会弹出来显示异常信息。正如 @kukac7 指出 的那样,还有一种方式来检查用户是否已经对这张照片点赞。

https://lh3.googleusercontent.com/-1AVr_x1XdOQ/VIiZfegGCqI/AAAAAAAAEpk/UpS5XLsavPE/w1674-h1290-no/Screenshot%2B2014-11-25%2B22.31.38.png

下面一节我们将实现 NavbarCtrl controller 来处理 Logout 动作,还有如果用户已经被认证,那么我们会把 Log in/Sign up 隐藏,而如果用户没有被认证,我们会把 Logout 隐藏。

© 著作权归作者所有

开源中国匿名会员
粉丝 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
20 个看起来很棒的 Web UI 工具包

程序员们比设计师更需要这些 UI 方面的内容: 1. Mini Reminders Mini Reminders 2. Transluscent UI elements Transluscent UI elements 3. Clear Login Window Template Clear Login Windo......

oschina
2013/09/08
13.5K
15
你上传的Instagram照片,正免费帮Facebook训练AI模型?

  为了打造出方便厉害的AI机器学习模型,Facebook运用Instagram上35亿张公开照片、无数的Hashtag,成为训练模型的素材。   训练机器学习辨识图片中的物件,往往需要耗费人力、时间标注出...

人工智能技术社区
2018/05/04
0
0
Instagram 红人 Ail Miquela 不是「真人」!AI 渐渐入侵影视娱乐产业

【Technews科技新报】看到 Ail Miquela 这位有不少品牌代言、有百万 Instagram 追随者的红人,不少人一眼觉得她长得怪怪,像是娃娃玩偶,甚至并不是真人。但也有人不以为意,视她跟初音未来一...

陈 瑞霖
2018/04/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

数据库

数据库架构 数据库架构可以分为存储文件系统和程序实例两大块,而程序实例根据不同的功能又可以分为如下小模块。 1550644570798 索引模块 常见的问题有: 为什么要使用索引 什么样的信息能成...

一只小青蛙
今天
5
0
PHP常用经典算法实现

<? //-------------------- // 基本数据结构算法 //-------------------- //二分查找(数组里查找某个元素) function bin_sch($array, $low, $high, $k){ if ( $low <= $high){ $mid = int......

半缘修道半缘君丶
昨天
5
0
GIL 已经被杀死了么?

本文原创并首发于公众号【Python猫】,未经授权,请勿转载。 原文地址:https://mp.weixin.qq.com/s/8KvQemz0SWq2hw-2aBPv2Q 花下猫语: Python 中最广为人诟病的一点,大概就是它的 GIL 了。...

豌豆花下猫
昨天
5
0
git commit message form

commit message一般包括3部分:Header、Body、Footer。 <type>(<scope>):<subject>blank line<body>blank line<footer> header是必需的,body、footer可以省略。 header中type、subject......

ninjaFrog
昨天
5
0
聊聊Elasticsearch的CircuitBreakerService

序 本文主要研究一下Elasticsearch的CircuitBreakerService CircuitBreakerService elasticsearch-7.0.1/server/src/main/java/org/elasticsearch/indices/breaker/CircuitBreakerService.ja......

go4it
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部