angular项目总结

这两天做了两个H5页面  用的是angular框架  其实用这个稍微有点小题大做  主要是我用习惯了  而且数据交互这用的熟  所以就用了 vue有时间做个小项目出来就好了  学习学习

言归正传 :

1 首先是ui框架 因为是滑动页面  所以用了swiper:  http://idangero.us/swiper/demos/29-custom-pagination.html  这次的要求是有tab键  并且tab键可以点击到相关的页面  滑动页面后 tab组件也要跟着变化   代码:正常引用css 和js后   想要字随页面变化  页面也随点击的字变化  要添加下面的代码:

script

$(function () {    var mySwiper = new Swiper('.swiper-container', {        //tab切换        onSlideChangeEnd: function (swiper) {            var j = mySwiper.activeIndex;            $('.swiper-tab li').removeClass('active').eq(j).addClass('active');        }        //initialSlide: 1//第几页开始的  去掉这个滑动就会正常了    });    //列表切换    $('.swiper-tab li').on('click', function (e) {        e.preventDefault();        //得到当前索引        var i = $(this).index();        $('.swiper-tab li').removeClass('active').eq(i).addClass('active');        mySwiper.slideTo(i, 1000, false);    });})

css 要比正常的多出一行:

.swiper-pagination-bullet-active {  color: #fff;  background: #007aff;}

这样就可以生成tab组件与swiper的结合使用了

2 要求页面往下滑动时候加载下一页的数据  虽然大致我能想出来怎么做  但是感觉还是好麻烦的说  所以  我就搜到了一个插件https://github.com/sroze/ngInfiniteScroll 

这个是参考别的  所以附上原文链接:http://www.cnblogs.com/Uncle-Maize/p/6255840.html?utm_source=itdadao&utm_medium=referral   写的挺清楚的  大家直接参考用就好了  当然我也会在底下放上我自己的代码  毕竟我自己码放了一遍  看着更熟不是  

1)首先下载ng-infinite-scroll.js 链接:http://sroze.github.io/ngInfiniteScroll/  目前是1.0.0版本

2)如果你是用的 jQuery2.0 以上版本，还需要修改 ng-infinite-scroll.js 程序，将所有的将所有的 $window.xxx 改为 $(window).xxx, elem.xxx 改为 $(elem).xxx

3)引入js

<script type='text/javascript' src='path/to/jquery.min.js'></script><script type='text/javascript' src='path/to/angular.min.js'></script><script type='text/javascript' src='path/to/ng-infinite-scroll.min.js'></script>

4)重要的部分  示例代码:

html

<div class="swiper-slide comment" infinite-scroll='comments.nextPage()'     infinite-scroll-disabled='comments.busy'     infinite-scroll-distance='1'>    <div class="comment-border" ng-repeat="n in comments.items">        <div class="comment-style">            <img ng-src="{{n.CommentReplyerHeaderImage}}" class="layout-mr20" ng-cloak>            <!--src="img/children-head.jpg"-->            <div class="comment-pic">                <span class="comment-titel typography-ellipsis layout-mb5"                      ng-cloak>{{n.CommentReplyerName}}</span>                <span class="writer">                <img src="img/smile.png" alt="">                <my-directive></my-directive>            </span>            </div>        </div>        <p class="thewords layout-pb15">            {{n.reply_comments}}        </p>        <div class="photos">            <div class="img-body photo" ng-style="{'background-image': 'url({{n.thumbnail_img_url_one}})'}"                 ng-if="n.thumbnail_img_url_one">            </div>               </div>        <div class="review" ng-show="n.comment_type_choices == 2">            <div class="layout-p10">                <div class="review-for">引用 <span>@{{n.UserName}}</span>:</div>                <p> {{n.comments}}</p>            </div>            <div class="photos">                <div class="img-body photo"                     ng-style="{'background-image': 'url({{n.reply_thumbnail_img_url_one}})'}"                     ng-if="n.reply_thumbnail_img_url_one">                </div>                       </div>        </div>        <div class="grayline"></div>    </div></div>

js

var app = angular.module('app', ['infinite-scroll']);app.controller('sharePageController', 
["$scope", "$http", "Comment", "ExportAdvice", "SharePhotos", 
function ($scope, $http, Comment, ExportAdvice, SharePhotos) {    $scope.comments = new Comment();    $scope.exportAdvice = new ExportAdvice();    $scope.sharePhotos = new SharePhotos();}]);// 评论多页滚动加载app.factory('Comment', function ($http) {    var Comment = function () {        this.items = [];        this.busy = false;        this.after = '';        this.page = 1;    };    var pageSize = 10;    var isLoadCompleted = false;    Comment.prototype.nextPage = function () {        // 判断是否已经加载到最后一条数据了        if (isLoadCompleted) {            return;        }        if (this.busy) return;        this.busy = true;        var url = "http://************?page=" + this.page + "&product_id=418";        $http.get(url, {            headers: {'SECRET-KEY': '######'}        }).then(function (response) {            if (response.data.results.data.length < pageSize) {                isLoadCompleted = true;            }            var items = response.data.results.data;            for (var i = 0; i < items.length; i++) {                this.items.push(items[i]);            }            this.after = "t3_" + this.items[this.items.length - 1].id;            console.log(this.after);            this.busy = false;            this.page += 1;        }.bind(this));    };    return Comment;});

差不多就是这样了  主要意思都在  参考着看吧

这边要说一下  

 1))我参考的原文的作者没有加识别"是否是最后一条数据"这项 如果不加的话 即使没有数据  也会继续往下求  并且报错  所以一定要加  我这个接口每页是返回10条数据

 2))this.after对于我的项目是没用的 我就是忘了删了 以上就实现"滑动页面加载下一页数据的实现了"

 3))swiper为了保证页面的一致性  所以设定了以height最高的页面为基准  对于我这次就不适合了  因为我总共4个tab页 其中2 3 4是要加载第二页第三页```数据的  按照它的那个逻辑 我的所有页面都要那么长 很难看  所以后来查了资料  看到swiper有个api 是"autuHight" 设置这个为true就行  但是对于我的不起效  最后我就设置了css  这样就实现了自适应高度

.swiper-slide{  height:pxToRem(500px);}.swiper-slide-active{  height:auto;}

 4))header里面的SECRET-KEY 是后端自己设置的 我理解为相当于验证吧  只要记住它的写法和码放位置就好了

 5))依赖注入的格式  在本地的时候我就配置的简单的  所以没事  但是提交到服务器上会报错

 6))这次我遇到一个困难  当然也是我对于angular的api不熟悉闹的  服务器返回的字段中有个时间  这个时间是utc格式的用户注册时间  我需要将这个时间和现在的时间做差  得到过去了多少天  我刚开始想的是添加一个函数  然后调用就好了  但是angular不知道是不允许还是怎样  就是添加不上  后来我就在response返回值中  拿到这个字段  做了一个for循环  求得每个用户id的天数  存在一个数组里面  然后放进相应标签中  但是不行啊  angular不允许dom操作  那我怎么加呢?  就想到了指令  用指令把这个添加上  这个说一下$index很好用  因为我把循环出来的天数都放在了数组里  所以相关的ng-repeat要单独做  但是又不能一下子放两个  后来查资料  可以用$index引用  就成功显示了

//自定义指令app.directive("myDirective", function () {    return {        template: "<span ng-cloak>{{comments.arr[$index]}}天<span/>"    };});

3  大方面就差不多了  下面就是我自己想记一下的东西  毕竟干这行时间不长  忘性大 :

 1)如果要background-image与服务器的图片同步  要用ng-style  有两种写法  我没发现是为什么  因为版本都是一样的  所以我都放上:

第一种

<div class="poster"     ng-style="{'background-image': 'url(' + productsInfo.collectionListImage + ')'}"     ng-cloak></div>

第二种 

<div class="col-xs-3 img-body photo" ng-repeat="m in sharePhotos.items"     ng-style="{'background-image': 'url({{m.thumbnail_img_url_one}})'}"></div>

2)ng-cloak是防止图片没有加载完成时候  出现{{}}等东西的

3)我发现进度条是可以用flex布局  用calc实现width根据服务器返回数值改变大小的

4)控制标签显示与否  可以用ng-if  ng-show  ng-hide  根据true或false  可以用ng-class添加样式  

ng-class="{'zero':x.negativeCount==0}"

另外我又做了一个 H5 页面  基于 angular 做的  因为还是要滑动页面  所以用了 swiper 
这次的页面是有一个主页面  8 个产品页面  主要就是两个页面样式   我接到后看了下接口  8 个产品页面  样式一样  就是接口数据不同 所以我打算用 ng-repeat 来控制页面生成 
页面样式 要求: 主页面是全屏  产品页面是中间大  两边的都露出来一些  我是参考了 swiper 的这个案例做的: http://www.swiper.com.cn/demo/08-centered-auto.html

所有样式做完,数据请求到后遇到了了问题  首先  页面都生成以后  除了前两个页面  剩余的都滑不动  就是滑不过去  我开始想到是swiper-slide少了  所以在后面加了相应数量的空白swiper-slide 的div  可以滑动了  但是数据不一定会返回8个呀  我就像用js动态生成swiper-slide  生成了  但是不行  滑不动  我就想啊想  后来想到  是swiper的框架  所以应该调整swiper才对  所以找了api  问了度娘 知道了答案  只要在swiper的js中加上下面这两个就可以了 滑不动是因为swiper自己计算没有那么多页面  后生成的不承认

observer:true,//修改swiper自己或子元素时，自动初始化swiperobserveParents:true//修改swiper的父元素时，自动初始化swiper

按照设计要求  第一个和最后一个页面都不用那个中间大两边露出一点的样式  所以用nth-child  和nth-last-child 将swiper-slide样式调整为100%就好了  

完成!