Angularjs Infinite Scrolling

無限滾動卷軸(infinite scrolling)，又稱瀑布流，是現今流行的介面設計模式，許多著名的社群網站如:Facebook、Pinterest都是以這樣的瀏覽方式為主，這種互動方式讓使用者在瀏覽頁面時不用再像以前一樣不斷的點擊上一頁、下一頁，雖然這種介面設計模式看似完美，但仍有許多的知名網站如Google、Flicker採用分頁的介面設計模式，這是因為瀑布流這種模式較適用於非常即時的資料呈現需求狀況下，如使用者第一個想看到的應該是最新發生的消息、關注的動態，之後才慢慢看到尚未看到的動態，因此才會有許多的社群網站採取這種設計模式，而在此也分享infinite scrolling設計的優缺點，以及如何使用Angularjs來實作。

範例：http://plnkr.co/edit/9WpuUJ?p=preview

 一、優點

     1.因應不同裝置：一般桌上型電腦或筆記型的螢幕都較寬，故常採取並排的方式來顯示網站資訊，但隨著行動裝置的普及，與以往螢幕大小已有所不同，如直立式手機寬度就與一般螢幕相差甚遠，因此若採取infinite scrolling這種設計模式將瀏覽方式轉變為垂直的排列，搭配向下捲動的行為，可以讓使用者閱覽延續。
     2.預先載入時間短：若網頁需要呈現資訊有上萬筆，那麼在初始載入時勢必會花上大量時間來等待，因此只需要呈現少許資訊，待閱覽完這些資訊時再載入更多資訊。
     3.資源的節省：通常使用者並不會想一次看完所有資訊，故讓使用者想看實在產生多一點再去要求資源也較不會造成不必要的浪費。

二、缺點

     1.失去最佳的搜尋：常常在捲動時會看到較佳的一個搜尋結果，但當新的消息加入時會讓我們以為最佳的搜尋結果在下面，但未必如此，往下卷之後就較難回到我們剛剛所認定的最佳結果。
     2.跳回原頁面時，又需從最上方開始瀏覽。
     3.多餘的瀏覽：不斷的出現資訊，讓使用者不斷的瀏覽，就像一篇文章沒有中斷點。

三、介面設計一定有好跟壞，就取決於用戶需求，並分析缺點後做一些補強的措施，如結合各種介面設計的特點等。

四、接著則說明如何使用Angularjs來達成infinite scrolling的效果，設計概念主要是運用directive來創造<list-infinitescroll>的標籤，也就是設計一個listview的控件，只是這個控件可以讓開發人員傳入顯示的資料來源、標題、以及當捲軸捲到底時所想要做的事，對<list-infinitescroll>來說主要的任務是在每次捲動時判斷是否已經捲到底，若是，則進行使用控件人員所委派進來的動作，如載入下一批資料等，而這樣也達成的分離效果，開發控件的人只需要所有需要觸發的事件以參數當接口，當某些事件觸發時來執行使用控件所要執行的動作，而對使用控件的人來說他只需要將"當某些事件被觸發時所想做的事"傳入控件即可。

五、首先我們先來設計這個自訂標籤，作為一個獨立的模組，infinitescroll.js，而whenScrollBottom標籤主要是當捲動時來判斷是否已經到捲到底，若是則動作，inject標籤則是要能顯示repeat中item的值可參考：http://selfdesigning.blogspot.tw/2014/10/angularjs-ng-transcludeng-repeat.html。

(function () {
    angular.module('infinitescrollModule', [])
        .directive('listInfinitescroll', function () {
            return{
                restrict: 'E',
                scope: {
                    listTitle: '@',
                    datasource: '=',
                    doLoadMore: '=',
                },
                transclude: 'true',
                templateUrl: 'listview.html',
                link: function (scope, element, attrs) {
                   scope.divWidth = document.getElementById('myDiv').offsetWidth -60
                    scope.loadMore = function () {
                        if (scope.doLoadMore)  scope.doLoadMore()
                    }
                }

            }
        })
        .directive('inject', function () {
            return{
                restrict: 'A',
                link: function (scope, element, attrs, ctrl, transcludeFn) {
                    if (!transcludeFn) return;
                    transcludeFn(scope, function (clone) {
                        element.empty();
                        element.append(clone);
                    });
                }
            }
        })
        .directive('whenScrollBottom', function () {
            return function (scope, elem, attr) {
                var scrollBar = elem[0]
                elem.bind('scroll', function () {
                    if (scrollBar.scrollTop + scrollBar.offsetHeight >= scrollBar.scrollHeight) {
                        scope.$apply(attr.whenScrollBottom);
                    }
                })
            }
        })
})()

六、設計樣板介面listview.html作為list的顯示

<div class="panel panel-success">
    <div class="panel-heading"><h3>{{listTitle}}</h3> <div class="list-group-item" align="center" ng-show="isBusy"><span class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span>Loading...</div></div>
    <div id="myDiv" style="overflow: auto;max-height: 600px" when-scroll-bottom="loadMore()">
        <li class="list-group-item" ng-repeat="item in datasource">
            <div ng-transclude inject></div>
        </li>
    </div>
</div>

七、設計使用控件端所需要做的事app.js。

(function () {
    angular.module('appModule', ['infinitescrollModule'])
        .controller('appController', function ($scope) {
            $scope.oneceToShow = 20
            $scope.datasource = []
            $scope.init = function () {//第一次加入0~20
                $scope.sourcePush(0, $scope.oneceToShow)
            }
            $scope.doLoadMore = function () {//分批載入
                var start = $scope.datasource.length
                var end = start + $scope.oneceToShow
                $scope.sourcePush(start, end)
            }
            $scope.sourcePush = function (start, end) {
                for (var i = start; i < end; i++) {
                    $scope.datasource.push({
                        name: 'a',
                        id: i
                    })
                }
            }
            $scope.init()
        })
})()

八、使用控件端的樣板，其中傳入datasource、title、跟需要載入更多的function委派給控件去做。

<html ng-app="appModule">

  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="//code.angularjs.org/1.3.0/angular.js"></script>
   
    <script src="app.js"></script>
    <script src="infinitescroll.js"></script>
    <link rel="stylesheet" href="style.css" >
   
  </head>

  <body ng-controller="appController">
    <div style="margin: auto;">
    <list-infinitescroll datasource="datasource"
                         list-title="{{'Infinite Scroll Demo'}}"
                         do-load-more="doLoadMore"
            >
        <div>
            <img ng-src="http://placehold.it/{{divWidth}}x100&text={{item.name + item.id}}" >
        </div>
    </list-infinitescroll>
</div>
  </body>

</html>