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

2015-02-02  来源:本站原创  分类:翻译-ng  人气:2 

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 来获取数据,所以它还什么都没有。

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

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

<!-- 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 指出 的那样,还有一种方式来检查用户是否已经对这张照片点赞。

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

相关文章
  • AngularJS+Satellizer+Node.js+MongoDB- Instagram-10 2015-02-01

    Build an Instagram clone with AngularJS, Satellizer, Node.js and MongoDB 10.Express Skeleton instagram 目录下新建一个 server 文件夹,和 client 并排放在一起. 在 server 目录下新建两个文件: package.json 和 server.js.打开 package.json 把下面的代码复制进去,这是我们整个应用所要用到的依赖: <!-- lang: js --> { &

  • AngularJS+Satellizer+Node.js+MongoDB- Instagram-19 2015-02-02

    Build an Instagram clone with AngularJS, Satellizer, Node.js and MongoDB 19.优化 这节里面我们将会讲述一些通用的优化技巧,用以加速你的应用.首先,让我们来看看没有做任何改变之前我们需要多长时间来加载页面. 这是最近的 25 个请求,总通信 1.40 MB 用时 442ms (+/- 100ms) 来加载该页面.编译工具可以拯救它.如果你有读过我前一篇教程的话,你就应该知道我有多爱 gulp.js. 为了提高我们的 web

  • AngularJS+Satellizer+Node.js+MongoDB- Instagram-17 2015-02-02

    Build an Instagram clone with AngularJS, Satellizer, Node.js and MongoDB 17.Detail 页面 还有一个重要部分没有实现就是这个一张照片的详细页面了 – 为每张照片设置一个独立的页面,包含放大的图片,说明,吐槽,点赞数量. 创建一个新的模板 views/detail.html 内容如下: <!-- lang: js --> <div class="container"> <div

  • AngularJS+Satellizer+Node.js+MongoDB- Instagram-01 2015-01-29

    Build an Instagram clone with AngularJS, Satellizer, Node.js and MongoDB 1.Introduction Satellizer 是 AngularJS 的 一个基于 token 认证模块,它提供了内置支持肥死不可(Facebook), 股沟(Google), 冷硬(LinkedIn), 腿疼(Twitter), 给哈(GitHub), 丫浮(Yahoo) 和窗来(Windows Live) 的 OAuth 认证,以及传统的邮件

  • AngularJS+Satellizer+Node.js+MongoDB- Instagram-02 2015-02-01

    Build an Instagram clone with AngularJS, Satellizer, Node.js and MongoDB 2.Demo & 源码 伸手党看这里 Live Demo 和 GitHub Project.这是我们这篇教程的最终实现: 免责声明: 这个应用没打算盗版 Instagram.我只是想演示一下用 Satellizer 来做认证是有多简单.我之所以选择 Instagram 是因为在 Satellizer 的例子中已经实现了 Facebook, Google

  • AngularJS+Satellizer+Node.js+MongoDB- Instagram-03 2015-02-01

    Build an Instagram clone with AngularJS, Satellizer, Node.js and MongoDB 3.开始 让我们从下载 AngularJS 的最新版本开始.记住点 Browse additional modules 来下载 angular-route.js 和 angular-messages.js.后面那个是用来显示输入认证的错误信息的. 创建一个新的文件夹,命名为 instagram.在它里面建 client.在 client 里面创建 ve

  • AngularJS+Satellizer+Node.js+MongoDB- Instagram-04 2015-02-01

    Build an Instagram clone with AngularJS, Satellizer, Node.js and MongoDB 4.Bootstrapping UI 因为我们引用了 CDN 上的 Paper Bootstrap 主题,让我们来给 index.html 加一个导航组件.在 <div ng-view></div> 的前面添加下面的代码,让所有的页面都能共用. <!-- lang: js --> <div class="nav

  • AngularJS+Satellizer+Node.js+MongoDB- Instagram-05 2015-02-01

    Build an Instagram clone with AngularJS, Satellizer, Node.js and MongoDB 5.路由 接下来,我们要在主页创建一个缩略图的网格.因此我们需要设置 Angular 的路由,基于 URL 来渲染页面.比如说,当用户访问 http://localhost:8000 ,路由会渲染 home.html 模板,那么,访问 http://localhost:8000/login, 路由则会渲染 login.html 模板. 注意: 为了简单

  • AngularJS+Satellizer+Node.js+MongoDB- Instagram-06 2015-02-01

    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 sig

  • AngularJS+Satellizer+Node.js+MongoDB- Instagram-08 2015-02-01

    Build an Instagram clone with AngularJS, Satellizer, Node.js and MongoDB 8.Login 页面 打开 login.html 把下面内容复制进去: <div class="container"> <div class="center-form panel"> <div class="panel-body"> <h4 class=&quo

  • AngularJS+Satellizer+Node.js+MongoDB- Instagram-07 2015-02-01

    Build an Instagram clone with AngularJS, Satellizer, Node.js and MongoDB 7.Satellizer 去 https://github.com/sahat/satellizer 点击右边菜单的 Download ZIP 按钮,解压之后拷贝 satellizer.js 到 instagram/client/vendor 文件夹. 打开 index.html 然后 Satellizer 在 app.js 之前引入. <!-- la

  • AngularJS+Satellizer+Node.js+MongoDB- Instagram-09 2015-02-01

    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-bod

  • AngularJS+Satellizer+Node.js+MongoDB- Instagram-11 2015-02-01

    Build an Instagram clone with AngularJS, Satellizer, Node.js and MongoDB 11.数据库和用户模型 很快你就会看到,我们用 Mongoose 包来连接 MongoDB.直接把 Mongo URI 写到 app.js 中实在太丑了,我们把它放到 config.js.那么,在 server 目录下新建一个文件 config.js,把下面代码贴进去: <!-- lang: js --> module.exports = { db:

  • AngularJS+Satellizer+Node.js+MongoDB- Instagram-12 2015-02-02

    Build an Instagram clone with AngularJS, Satellizer, Node.js and MongoDB 12.授权中间件和 JWT 把下面的方法加到 app.use() 中间件后面去.其实这个方法放在 server.js 哪里都无所谓,知识我们要确保我们在这篇教程里面能比较容易找到.这是一个单纯的 JavaScript 方法,把用户对象当成参数,然后返回一个 token 字符串. <!-- lang: js --> function createTok

  • AngularJS+Satellizer+Node.js+MongoDB- Instagram-15 2015-02-02

    Build an Instagram clone with AngularJS, Satellizer, Node.js and MongoDB 15.Instagram API 端点 本节中我们实现三个新的路由: 获取认证用户的更新. 获取指定 id 的 Instagram 媒体. 认证用户给特定媒体点赞. 在开始写代码之前,需要找出对应的端点.访问 Instagram API endpoints 来查看 API 端点列表.除了能知道你应该使用什么参数来访问特定端点外,你还可以知道端点会给你返

  • AngularJS+Satellizer+Node.js+MongoDB- Instagram-14 2015-02-02

    Build an Instagram clone with AngularJS, Satellizer, Node.js and MongoDB 14.Instagram 认证的 Express 路由 这一节变得比较难一点,因为它所涵盖的范围很大.我会把它打散成多个代码片段来讲解,在这一节最后给出完整代码. <!-- lang: js --> app.post('/auth/instagram', function(req, res) { }); 这个请求 /auth/instagram 由

  • AngularJS+Satellizer+Node.js+MongoDB- Instagram-13 2015-02-02

    Build an Instagram clone with AngularJS, Satellizer, Node.js and MongoDB 13.Login 和 Signup 的 Express 路由 我们的 Login路由非常简单.它要做的仅仅是认证 email 和 password.如果两个都正确了,那么就返回一个新的令牌和用户对象. 把下面的路由接着加到我们上次的地方,在 isAuthenticated() 的后面. <!-- lang: js --> app.post('/aut

  • AngularJS+Satellizer+Node.js+MongoDB- Instagram-18 2015-02-02

    Build an Instagram clone with AngularJS, Satellizer, Node.js and MongoDB 18.Navbar 增强 创建一个新文件 controllers/navbar.js 然后把下面内容贴进去: <!-- lang: js --> angular.module('Instagram') .controller('NavbarCtrl', function($scope, $rootScope, $window, $auth) { $s

  • AngularJS+Satellizer+Node.js+MongoDB- Instagram-16 2015-02-02

    Build an Instagram clone with AngularJS, Satellizer, Node.js and MongoDB 16.回到客户端 让我们创建一个新用户,然后登陆.验证一下我们后台功能的实现是不是像预期一样可以开始工作了. 刷新浏览器,从顶部导航点击注册连接,填写注册资料然后点击注册按钮. 如果一切正常的话你应该会被重定向到这个页面: 怎么回事?好的,默认的, Satellizer 会在用户注册成功之后自动登陆.你如果愿意你可以在 app.js 里面把它关掉: <

  • AngularJS+Satellizer+Node.js+MongoDB- Instagram-21 2015-02-02

    Build an Instagram clone with AngularJS, Satellizer, Node.js and MongoDB 21.总结 完结撒花!这是我那些年写过的最长的贴了.搞笑的是,我在 TV Show Tracker blog post 里面也说过同样的话.好吧,接下来你猜得到的咯,我那么能掰,接下去可能就是写本书或什么的咯. 原本我只打算写一篇关于如何使用 Satellizer 模块的快速入门,谁知道居然演变成了这超过了 14K 字的长篇大论全栈教程.情况总是在变的