How to Quick Load Large Number of data in Angularjs

How to Quick Load Large Number of data in Angularjs


Hi Viewer Today Discussed Angularjs  Large Number of data more then 10K data quickly loaded in angularjs.Its very easily just install plugin bower component is followed in details.

Clusterize.js is install  bower component.

How to Quick Load Large Number of data in Angularjs
How to Quick Load Large Number of data in Angularjs


bower install clusterize


npm install clusterize.js

or

GitHub Download Click Here 


bower.json
{
  "name""newapp",
  "authors": [
    "Flatfull"
  ],
  "description""AngularJS.",

  "main": [
    "dist/ng-camera.js",
    "dist/clusterize.js"
  
  ],
  
  "style""clusterize.css",
  "keywords": [
    "angularjs",
    "grid",
    "angular",
    "camera",
    "webcam",
    "picture",
    "snapshot",
    "directive",
    "large",
    "vanillajs",
    "scroll",
    "cluster",
    "list"
  ],
  "license""Envato REGULAR LICENSE",
  "homepage""http://themeforest.net/item/angulr-bootstrap-admin-web-app-with-angularjs/8437259",
  "private"true,
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],

  "dependencies": {
    "angular""2.0.0",
    "angular-animate""1.5.8",
    "angular-aria""1.5.8",
    "angular-bootstrap""~0.12.0",
    "angular-bootstrap-nav-tree""*",
    "angular-cookies""1.5.8",
    "angular-file-upload""~1.1.1",
    "angular-material""~0.10.0",
    "angular-messages""1.5.8",
    "angular-resource""1.5.8",
    "angular-sanitize""1.5.8",
    "angular-skycons""~2.0.0",
    "angular-smart-table""~1.4.9",
    "angular-touch""1.5.8",
    "angular-translate""~2.5.2",
    "angular-translate-loader-static-files""~2.5.2",
    "angular-translate-storage-cookie""~2.5.2",
    "angular-translate-storage-local""~2.5.2",
    "angular-ui-calendar""latest",
    "angular-ui-grid""~3.0.0-rc.16",
    "angular-ui-router""~0.2.11",
    "angular-ui-select""0.19.4",
    "angular-ui-utils""~0.2.1",
    "angular-xeditable""~0.1.8",
    "angularjs-toaster""~0.4.8",
    "animate.css""~3.2.0",
    "bootstrap""~3.3.0",
    "bootstrap-chosen""~1.0.0",
    "bootstrap-daterangepicker""~1.3.17",
    "bootstrap-filestyle""~1.1.2",
    "bootstrap-rtl""~3.3.4",
    "bootstrap-slider""*",
    "bootstrap-tagsinput""~0.4.2",
    "bootstrap-touchspin""~3.0.1",
    "bootstrap-wysiwyg""*",
    "bower-jvectormap""~1.2.2",
    "chosen""https://github.com/harvesthq/chosen/releases/download/v1.3.0/chosen_v1.3.0.zip",
    "datatables""~1.10.4",
    "flot""~0.8.3",
    "flot-spline""*",
    "flot.orderbars""*",
    "flot.tooltip""~0.8.4",
    "font-awesome""~4.2.0",
    "footable""~2.0.3",
    "fullcalendar""~2.2.6",
    "html5sortable""*",
    "jquery""~2.1.3",
    "jquery.easy-pie-chart""~2.1.6",
    "jquery.sparkline""~2.1.2",
    "jquery_appear""~0.3.3",
    "moment""~2.8.3",
    "nestable""*",
    "ng-grid""~2.0.13",
    "ngImgCrop""~0.2.0",
    "ngstorage""~0.3.0",
    "oclazyload""~0.5.1",
    "plugins""datatables/plugins#~1.0.1",
    "screenfull""~1.2.1",
    "simple-line-icons""~0.1.1",
    "slimscroll""~1.3.3",
    "textAngular""~1.2.2",
    "venturocket-angular-slider""~0.3.2",
    "videogular""~0.7.0",
    "videogular-buffering""~0.7.0",
    "videogular-controls""~0.7.0",
    "videogular-ima-ads""~0.7.0",
    "videogular-overlay-play""~0.7.0",
    "videogular-poster""~0.7.0",
    "waves""~0.7.2",
    "webcamjs""*",
    "ag-grid""7.0.x",
    "ag-grid-enterprise""7.0.x",
    "ag-grid-ng2""6.2.x",
    "clusterize""0.17.2"
  },
  "resolutions": {
    "angular-sanitize""^1.3.x",
    "fullcalendar""~2.7.1",
    "angular""1.5.8",
    "angular-cookies""1.5.8",
    "angular-touch""1.5.8",
    "moment"">=2.5.0"
  }
}

<link href="./clusterize.css" rel="stylesheet">
<script src="./clusterize.min.js"></script>
app.controller('myCtrl', function ($scope, $timeout, $window, $localStorage) {
    $scope.$storage = $window.localStorage;
   var stssd = localStorage.client;

   var array = localStorage.client.split(',');
   console.log(array);
   $scope.rows = array;
  
});

// Directive
app.directive('clusterize', function ($timeout, $compile) {
    return {
        restrict: 'E',
        template: '<table>' +
            '<thead></thead>' +
            '</table>' +
            '<div id="scrollArea" class="clusterize-scroll">' +
            '<table>' +
            '<tbody id="contentArea" class="clusterize-content">' +
            '<tr class="clusterize-no-data">' +
            '<td>Loading data…</td>' +
            '</tr>' +
            '</tbody>' +
            '</table>' +
            '</div>'+'<select class="clusterize-content"><option class="clusterize-no-data"></option></select>',
        link: function ($scope, elem, attr, ctrl) {
            // init clusterize
            var clusterize = new Clusterize({
                rows: $scope.rows,
                scrollId: 'scrollArea',
                contentId: 'contentArea'
            });

            clusterize.html = function (data) {
                var content_elem = angular.element(this.content_elem);

                //FIXME: This will probably break on IE9 with tables
                content_elem.html(data);
                $compile(content_elem.contents())($scope);
            };

            // watch for changes and update
            $scope.$watch('rows.length', function () {
                clusterize.update($scope.rows);
            });
        }
    }
});

HTML


<select ui-jq="chosen" class="clusterize-content" ng-controller="myCtrl">
                                 <option class="clusterize-no-data" ng-repeat="sks in rows track by $index">{{sks}}</option>
                             </select>
How to Quick Load Large Number of data in Angularjs Dev2Tricks 5 of 5
How to Quick Load Large Number of data in Angularjs Hi Viewer Today Discussed Angularjs  Large Number of data more then 10K data quick...

Share this

Related Posts

Previous
Next Post »

Xolo Offer