Superspeed your angularjs apps - Part 1

angular application optimization example.

by yoorek

HTML

<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>
<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() | orderBy:order">
            {{entry.label}} = "{{entry.value}}"
        </div>
    </fieldset>
</form>

JavaScript

function MyController( $scope) {
    var entries = [ 
        { label : 'one', value : 'first entry'}, 
        { label : 'two', value : 'second entry'}, 
        { label : 'three', value : 'third entry'}
    ];
    
    $scope.label ="";
    $scope.value ="";
    $scope.order = 'label';
    
    $scope.add = function() {
        entries.push({ 
            label : $scope.label, 
            value : $scope.value
        });
    };
        
    $scope.getEntries = function() {
        console && console.log( "getEntries() called");
        return entries;
    };
}