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

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...

Author : Dev2Tricks

Share this

Related Posts