继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

Angular简单页面实战记

四哥0819
关注TA
已关注
手记 12
粉丝 16
获赞 263

前面简要的对比了一下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);
打开App,阅读手记
31人推荐
发表评论
随时随地看视频慕课网APP