Superspeed your angularjs apps - Table

angular application optimization example. moding to a table

by jacobwsmith

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/1.3.1/lodash.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!--
<form name="myform" ng-app ng-controller="MyController">
    Label/Value :
    <input type="text" required ng-model="label">
    <input type="text" required ng-model="value">
    <button 
        ng-disabled="!myform.$valid" 
        ng-click="add()"
    >Add</button>
        
    <fieldset>    
        <legend>
            Entries sorted by 
            <select 
                ng-model="order" 
                ng-options="property for property in [ 'label', 'value']">
            </select>
        </legend>
        <div ng-repeat="entry in getEntries()">
            {{entry.label}} = "{{entry.value}}"
        </div>
    </fieldset>
</form>
-->
<div ng-app ng-controller="MyController">
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>&nbsp;</th>
                <th>Name</th>
                <th>Value</th>
                <th>Account</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            <!-- <tr ng-repeat="entry in entries"> -->
            <tr ng-repeat="entry in getEntries()">
                <td>{{$index+1}}.</td>
                <td><a href="http://test.com?id={{entry.id}}">{{entry.name}}</td>
                <td>{{entry.value}}</td>
                <td>{{entry.account}}</td>
                    <td>action</td>
            </tr>
        </tbody>
    </table>
</div>

JavaScript

var data = [];
for(var i=0;i<2500;i++){
    data.push({
        id: i,
        name: 'Name-'+i,
        value: 'Value-'+i,
        account: 'Account-'+i
    });
}
//console.log(window.data);

function MyController($scope) {
    
    //$scope.entries = window.data;
    
    var entries = window.data;

    /*
    $scope.order = 'id';
    
    $scope.getEntries = _.memoize( 
        function() {
            console && console.log( "getEntries() sorted by '" + $scope.order + " 'called");
                // return entries sorted by value of $scope.order
            return _.sortBy( entries, $scope.order);
        }, 
        function() { 
                // return the cache key for the current result to store 
            return $scope.order;
        }
    );
    */
    
    
    $scope.getEntries = function(){
        return entries;
    }
}