Angular简单页面实战记-原创手记-慕课网

前面简要的对比了一下vue和angular，只是抛装引玉，希望大家能对mvvm有所了解，对vue和angular感兴趣；现在我们就开始在项目中运用ng，一个简单排行宣传页。

我们先来看下设计和[需求]

$!\[需求设计稿\](http://upload-images.jianshu.io/upload_images/80274-f2e0e793deb7b4bf.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)$

页面设计非常简单，构思一下页面架构和布局，就可以开始干了，对于css和html很熟练的同学来说应该是一个很简单的项目。

新建一个项目名为主播排行榜，添加基本的项目目录结构，新建一个index页面，注意是移动端页面必要的meta标签不要忘记了，这个html页面应该是这样子的。

<!DOCTYPE html>
<html lang="zh-cn">

    <head>
        <meta charset="utf-8">
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
        <meta name="format-detection" content="telephone=no, address=no">
        <meta name="author" content="Storm">
        <title>人气/魅力排行榜</title>
        </head>
    <body>

    </body>    
</html>

眼尖的同学应该看到了 author是Storm，哈哈，其实这是老大写的html文档，我只是接手写js而已。算了，html不难，我们快进到js部分。

效果中有一个左右切换的交互，我们利用现成的插件swiper做，官网地址 http://www.swiper.com.cn/，所以我们需要的js资源应该有两个

<script src="https://cdn.bootcss.com/angular.js/1.5.7/angular.min.js"></script>
<script src="https://cdn.bootcss.com/Swiper/3.3.1/js/swiper.min.js"></script>

有了angular和swiper，现在就需要我们自己动手了，左右切换js代码

//滑动切换        
    var swiper = new Swiper('#swiper-container', {
        resistanceRatio: 0,
        pagination: '.swiper-pagination',
        parallax: true,
        paginationClickable: true,
        resistance: '100%',
        speed: 300,
        paginationBulletRender: function(index, className) {
            var name;
            switch (index) {
                case 0:
                    name = '主播人气榜';
                    className += ' ranking-btn';
                    break;
                case 1:
                    name = '主播魅力榜';
                    className += ' charm-btn';
                    break;
                default:
                    name = '';
            }
            return '<div class="' + className + '">' + name + '</div>';
        }
    });

首先需要声明是一个ng程序，然后声明controler，获取后端的列表数据，两个排行榜数据，angular有现成的http服务，为了方便那我们好用，我们将http封装成ajax方法。

var app = angular.module('leaderboard', []);
app.controller('leaderboard', function($scope, $http) {
        //封装ajax请求
        var ajax = function(action, data, callback) {
          $http[method](action, data)
                .success(function(req) {
                    if (req.code === '000000') {
                        callback(req.data);
                    } else {
                        $scope.failureHide = false;
                        $scope.infoHide = true; //退出弹出框
                        $scope.failureMsg = req.msg;

                    }
                })
                .error(function() {
                    $scope.failureHide = false;
                    $scope.infoHide = true; //退出弹出框
                    $scope.failureMsg = '网络错误请重试';
                });
        };  

        // 直播人气榜
        ajax(masterPopularRank, {}, function(data) {
            $scope.loading = false;
            $scope.masterPopularRank = data.masterPopularRank; //人气主播列表
        });

        // 直播魅力榜
        ajax(masterCharmRank, {}, function(data) {
            $scope.loading = false;
            $scope.masterCharmRank = data.masterCharmRank; //魅力主播列表
        });

})

忘记说了，我们将获取的接口数据data挂载到$scope.masterPopularRank和$scope.masterCharmRank中，页面中需要用指令获取并渲染出数据，所以我们需要在html中加一点点指令渲染人气榜中的金牌。

因为我们的masterPopularRank是一个Array，所以很自然的我们取第一名就是masterPopularRank[0]，对应的字段用.去获取，masterPopularRank[0].nickname得到的就是[人气榜]的[第一名]的[昵称]，其他的字段类似。

这里有个小技巧，就是渲染下面的列表4-10名的数据。自然我们想到的是ng-repeat，然后我们用了一个ng-if="$index > 2"的指令，这样我们就将1-3名的省略掉了,很投巧的方法，本来我以为angular中也有和vue一样的limit过滤，可惜我没有找到。

<!-- 金牌 -->
<div class="gold medal">
    <div class="medal-img" ng-click="getUserInfo(masterPopularRank[0])"><img ng-src="{{masterPopularRank[0].icon}}" alt="{{masterPopularRank[0].nickname}}" /><span class="gold-crown"></span></div>
    <p class="medal-title">{{masterPopularRank[0].nickname}}
        <button ng-if="masterPopularRank[0].subStatus == 1" disabled type="button" class="btn-attention">已关注</button>
        <button ng-if="masterPopularRank[0].subStatus == 0" type="button" class="btn-attention" ng-click="getFocus(masterPopularRank[0])">关注</button>
    </p>
    <p class="medal-code">喵号 {{masterPopularRank[0].platAcc}}</p>
</div>
<!-- /金牌 -->
<!-- 人气榜列表 -->
<ul class="list">
    <li ng-repeat="master in masterPopularRank" ng-if="$index > 2" class="list-item">
        <div class="list-num">{{$index+1}}</div>
        <div class="list-img" ng-click="getUserInfo(master)"><img ng-src="{{master.icon}}" src="" alt="{{master.nickname}}" /></div>
        <div class="list-info">
            <div class="list-name">{{master.nickname}}
                <button ng-if="master.subStatus == 1" disabled type="button" class="btn-attention">已关注</button>
                <button ng-if="master.subStatus == 0" type="button" class="btn-attention" ng-click="getFocus(master)">关注</button>
            </div>
            <div class="list-code">喵号 {{master.platAcc}}</div>
        </div>
    </li>
</ul>
<!-- /人气榜列表-->

这样渲染的出来的列表我们就可以看到效果了，当然数据是我们本地模拟的数据，切换也有了的，但是还缺一点就是点击个人头像会弹出个人信息，这个需要我们做一个弹出框，利用ng-if显示隐藏就好了。

具体的实现方式是在html中注册一个点击事件，点击的时候更改$scope.infoHide = fasle;这样就是显示弹出框，当然在这之前需要把个人信息的数据填入，然后我们点击弹框的关闭按钮$scope.infoHide = true。

好了，代码实现的思路都说明了，具体代码在git上有，地址为 http://git.oschina.net/zss01/Ranking，项目应该是最近两天上线，也可以进游戏猫app的直播模块的banner。

实际效果

ps彩蛋:
1.由于产品需求会有所变更，比如弹出框中的关注按钮去掉了。
2.由于需求优化中有一在弹出框弹出的时候不允许页面滑动，告诉大家一个比较好的方案。

$scope.unmove = function(event) {
    event.preventDefault();
}

//组织页面滑动
document.addEventListener("touchmove", $scope.unmove, false);

//允许页面滑动
document.removeEventListener("touchmove", $scope.unmove, false);

Angular简单页面实战记原创