Angular: CRUD Admin

http://angularjs.org/

by colvint

HTML

<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<div ng-controller="itemController">
    <div class="search-panel"></div>
    <h1 class="logo">Item Admin</h1>
    <div class="command-panel">
        <div class="commands">
            <button class="edit" ng-click="editItems()" ng-disabled="selectedItems().length == 0">Edit</button>
            <button class="delete" ng-click="confirmDeleteItems()" ng-disabled="selectedItems().length == 0">Delete</button>
            <span class="selection-count">{{selectedItems().length}} selected items.</span>
        </div>
    </div>
    <div class="cleared"></div>
    <div>
        <div class="filter-panel">
            <button class="new" ng-click="newItem()">New</button>
            <div class="filters">
                <ul>
                    <li><a ng-click="setFilter('allItems')">All</a></li>
                    <li><a ng-click="setFilter('heavyWeightItems')">Heavy Weight</a></li>
                    <li><a ng-click="setFilter('middleWeightItems')">Middle Weight</a></li>
                    <li><a ng-click="setFilter('lightWeightItems')">Light Weight</a></li>
                </ul>
            </div>
        </div>
        <div class="main-panel" ng-view></div>
        <div class="cleared"></div>
    </div>
    <div class="lightbox" ng-show="lightbox.itemForm.on">
        <div class="mask"></div>
        <div class="content">
            <div class="header">
                <h3><ng-pluralize count="selectedItems().length" when="{'0': 'New Item', '1': 'Editing 1 Item', 'other': 'Editing {} Items'}"></ng-pluralize></h3>
                <a class="close-btn" ng-click="lightbox.close('itemForm')">Close</a>
                <div class="cleared"></div>
            </div>
            <div class="form">
                <form novalidate>
                   ...

CSS

body {
    font-family: helvetica;
    font-size: 14px;
    padding: 5px;
}

table, .show {
    border: 1px solid black;
}

h3 {
    font-weight: bold;
}

thead td {
    color: white;
    background-color: gray;
}

tr.even {
    background-color: #e5e5e5;
}

td {
    padding: 10px;
}

.command-panel {
    float: left;
    margin-bottom: 10px;
}

.filter-panel, .main-panel {
    float: left;
    margin-right: 10px;
}

.filter-panel {
    width: 150px;
}

.main-panel, .command-panel {
    width: 500px;
}

.main-panel table {
    width: 100%;
}

.filters {
    border: 1px solid black;
    padding-left: 25px;
    padding-bottom: 15px;
}

.filters li {
    margin-top: 15px;
}

.commands {
    border: 1px solid black;
    padding: 10px;
}

button {
    border: 1px solid black;
    padding: 7px;
}

button.new {
    width: 150px;
    font-weight: bold;
    margin-bottom: 10px;
}

.cleared {
    clear: both;
}

.selection-count {
    padding: 5px;
}

.logo {
    float: left;
    width: 160px;
    text-align: center;
    padding-top: 25px;
    font-weight: bold;
    font-size: 15px;
}

.lightbox .mask {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.5;
    top: 0;
    left: 0;
}

.lightbox .content {
    position: fixed;
    background: white;
    top: 50%;
    left: 50%;
    width: 600px;
    margin-left: -300px;
    margin-top: -100px;
    border-radius: 10px;
    box-shadow: 0 0 1em black;
    padding: 10px;
}

.lightbox h3 {
    float: left;
    font-weight: bold;
    font-size: 15px;
}

.lightbox .close-btn {
    float: right;
}

.lightbox .message {
    margin: 20px;
}

label {
    display: block;
    margin-bottom: 10px;
    font-weight: bold;
}

input[type=text] {
    width: 250px;
    line-height: 25px;
    font-size: 15px;
    padding: 2px;
}

li {
    margin-top: 10px;
}

.form {
    margin: 25px;
}

#item {
    padding: 10px;
}

#item ol {
    margin-top: 25px;
    margin-bottom: 25px;
    margin-left: 15px;
}

JavaScript

var myApp = angular.module('myApp', []);

myApp.config(function ($routeProvider, $locationProvider) {
    $routeProvider.when('/items/:id', {
        templateUrl: 'show.html',
        controller: 'itemShowController'
    });
    $routeProvider.otherwise({
        templateUrl: 'index.html',
        controller: 'itemIndexController'
    });

    $locationProvider.html5Mode(true);
});

myApp.controller('itemIndexController', function ($scope) {
    
    $scope.allSelected = false;
    
    $scope.toggleAllSelected = function () {
        _.each($scope.items, function (item) {
            item.selected = $scope.allSelected;
        });
    };

});

myApp.controller('itemController', function ($scope, lightBox, itemResource) {
    
    $scope.lightbox = lightBox;
    
    $scope.currentItem = {};
    
    $scope.items = itemResource.list();    
    
    $scope.setCurrentItem = function (item) {
        $scope.currentItem = item;
    };
    
    $scope.selectedItems = function () {
        return _.where($scope.items, {
            selected: true
        });
    }    

    $scope.itemFormValid = function () {
        return $scope.currentItem.name || $scope.currentItem.weight;
    };
    
    $scope.deselectAllItems = function () {
        return _.each($scope.items, function (item) {
            item.selected = false;
        });
    }
        
    $scope.setFilter = function (method) {
        $scope.currentFilter = $scope[method];
    }

    $scope.allItems = function (item) {
        return true;
    }
        
    $scope.heavyWeightItems = function (item) {
        return item.weight >= 200;
    }

    $scope.middleWeightItems = function (item) {
        return item.weight < 200 && item.weight >= 150;
    }

    $scope.lightWeightItems = function (item) {
        return item.weight < 150;
    }

    $scope.setFilter('allItems');

    $scope.newItem = function () {
        $scope.deselectAllItems();
        $scope.setCurrentItem({name: null, weight: null});
       ...