使用Angular和Firebase实现的一款原质化记录列表应用

Record Lists, 带分类过滤功能。 Firebase是Google提供的一款BaaS产品，即把管理后台/数据后台作为一个云端服务提供给移动应用开发者。Firebase本质上是和NodeJS类似的实时JS开发框架。

angular, firebase, list, app

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 1774
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

// Define the model classes and relationships
function InitializeRekord() {
    var ItemList = Rekord({
        name: 'item_list',
        fields: ['name'],
        comparator: 'name',
        hasMany: {
            items: {
                model: 'item_list_item'
            }
        }
    });

var ItemPreference = Rekord({
        name: 'item_preference',
        key: 'item_id',
        fields: ['brand', 'model', 'location'],
        belongsTo: {
            item: {
                model: 'item'
            }
        }
    });

var Item = Rekord({
        name: 'item',
        fields: ['name'],
        hasOne: {
            preference: {
                model: 'item_preference',
                local: 'id'
            }
        }
    });

var ItemListItem = Rekord({
        name: 'item_list_item',
        key: ['item_id', 'item_list_id'],
        fields: ['amount', 'gotten'],
        defaults: {
            gotten: false
        },
        belongsTo: {
            item: {
                model: 'item'
            },
            list: {
                model: 'item_list'
            }
        }
    });

// 1. Loads local data
    // 2. Initializes relationships
    // 3. Resume pending operations if app was closed while offline
    // 4. Load remote data (based on load option)
    Rekord.load();
}

// Configure Defaults for this application
function ConfigureRekord() {
    // Load all records from Firebase
    Rekord.Database.Defaults.load = Rekord.Load.All;
    // Firebase has a complete set of data - if we request all records and we have a saved record locally - remove it
    Rekord.Database.Defaults.allComplete = true;
    // Firebase handles saving locally - no need to interact with local storage
    Rekord.Database.Defaults.cache = Rekord.Cache.None;
    // Firebase uses / to mean something, change it to something else.
    Rekord.Database.Defaults.keySeparator = '--';
    // Automatically set the firebase API reference based on the name
    Rekord.Database.Defaults.prepare = function(db, opts) {
        db.api = firebase.database().ref(db.name);
    };
}

// Initialize Firebase
firebase.initializeApp({
    apiKey: "AIzaSyA-Qwk3oifbsA2PG8YojFs91AKKCc91Kvw",
    authDomain: "rekord-firebase.firebaseapp.com",
    databaseURL: "https://rekord-firebase.firebaseio.com",
    storageBucket: "rekord-firebase.appspot.com"
});
firebase.auth().signInAnonymously().catch(function(error) {
    alert(error);
});

// Angular 
var app = angular.module('proto', ['ngMaterial', 'material.svgAssetsCache', 'rekord']);

app.run(ConfigureRekord);
app.run(InitializeRekord);

app.factory('Item', Rekord.Factory.ref('item'));
app.factory('ItemPreference', Rekord.Factory.ref('item_preference'));
app.factory('ItemList', Rekord.Factory.ref('item_list'));
app.factory('ItemListItem', Rekord.Factory.ref('item_list_item'));

app.controller('ListController', function($scope, $mdSidenav, $mdMedia, $mdDialog, Item, ItemList, ItemPreference, ItemListItem) {

var ctrl = this;

// All changes to lists should update scope
        Rekord.Sync($scope, ItemList);

// Main Menu
        this.openMainMenu = function() {
            $mdSidenav('left').open();
        };

// When lists are loaded - select the first one
        ItemList.ready(function(lists) {
            $scope.$evalAsync(function() {
                if (!ctrl.list) {
                    ctrl.list = ItemList.all()[0];
                }
            });
        });

// Refresh List
        this.refreshAll = function() {
            ItemList.refresh();
        };

// List & Items
        this.list = null; // current list
        this.lists = ItemList.all();

// Adding List
        this.addingList = false;
        this.listName = '';
        this.addList = function() {
            this.addingList = true;
            this.listName = '';
        };
        this.cancelListAdd = function() {
            this.addingList = false;
        };
        this.finishListAdd = function() {
            var name = this.listName.trim();
            if (name) {
                this.list = ItemList.create({
                    name: name
                });
                this.listName = '';
            }
            this.addingList = false;
        };

// List Population
        this.getDropdownLabel = function() {
            if (!this.list) {
                return 'List ...';
            }
            var items = this.list.items;
            var name = this.list.name;

return name + ' (' + items.countWhere('gotten', true) + '/' + items.length + ')';
        };

// List Action Implementations
        this.reverse = function() {
            this.list.items.reverse();
        };
        this.removeGotten = function() {
            this.list.items.removeWhere(true, 'gotten', true);
        };
        this.clearItems = function() {
            this.list.items.unrelate();
        };
        this.getAll = function() {
            this.list.items.update('gotten', true);
        };
        this.dropGotten = function() {
            this.list.items.sort('gotten');
        };
        this.orderItemsByLocation = function() {
            this.list.items.sort('item.preference.location');
        };
        this.removeList = function() {
            this.list.$remove();
            this.list = null;
        };

// Renaming
        this.renamingList = false;
        this.cancelListRename = function() {
            this.list.$push();
            this.renamingList = false;
        };
        this.finishListRename = function() {
            this.list.$discard();
            this.renamingList = false;
        };
        this.renameList = function() {
            this.list.$pop();
            this.renamingList = true;
        };
        this.refreshList = function() {
            this.list.$refresh();
        };

// List Actions
        this.listActions = [{
                label: 'Refresh',
                icon: 'fa-refresh',
                action: this.refreshList
            }, // refresh
            {
                label: 'Rename',
                icon: 'fa-pencil',
                action: this.renameList
            }, // pencil
            {
                label: 'All gotten',
                icon: 'fa-check',
                action: this.getAll
            }, // ?
            {
                label: 'Move gotten to bottom',
                icon: 'fa-arrow-down',
                action: this.dropGotten
            }, // strike through
            {
                label: 'Reverse order',
                icon: 'fa-random',
                action: this.reverse
            }, // sort descending
            {
                label: 'Remove gotten from list',
                icon: 'fa-strikethrough',
                action: this.removeGotten
            }, // x
            {
                label: 'Order by location',
                icon: 'fa-map-marker',
                action: this.orderItemsByLocation
            }, // ?
            {
                label: 'Clear',
                icon: 'fa-eraser',
                action: this.clearItems
            }, // ?
            {
                label: 'Delete',
                icon: 'fa-trash',
                action: this.removeList
            }, // trash
        ];

})
    .directive('rkItemEditor', function() {
        return {
            replace: true,
            scope: {
                list: '='
            },
            template: rkItemEditorTemplate.innerHTML,
            controllerAs: 'editorCtrl',
            controller: function($scope, Item, ItemListItem) {

var preferenceTemplate = {
                    brand: '',
                    model: '',
                    location: ''
                };
                this.itemName = '';
                this.itemAmount = '';
                this.itemSelected = null;

this.querySearch = function(text) {
                    return Item.all().where('name', new RegExp(text, 'i'), Rekord.equals); // Rekord.equals must be specified to use regex
                };

this.addItem = function() {
                    var name = this.itemName.trim();
                    var amount = this.itemAmount.trim();
                    if (!name) {
                        return;
                    }
                    var list = $scope.list;
                    var item = this.itemSelected || Item.create({
                        name: name,
                        preference: preferenceTemplate
                    });
                    ItemListItem.persist({
                        item: item,
                        list: list,
                        amount: amount,
                        gottem: false
                    });
                    this.itemName = '';
                    this.itemAmount = '';
                    this.itemSelected = null;
                };
            }
        }
    })
    .directive('rkItem', function() {
        return {
            replace: true,
            scope: {
                listItem: '=',
                ctrl: '='
            },
            template: rkItemTemplate.innerHTML,
            controllerAs: 'itemCtrl',
            controller: function($scope, $mdMedia, $mdDialog) {
                var list_item = $scope.listItem;
                this.sync = function() {
                    Rekord.Sync($scope, list_item);
                    Rekord.Sync($scope, list_item.item);
                    Rekord.Sync($scope, list_item.item.preference);
                };
                this.updateItem = function() {
                    list_item.$save();
                };
                this.removeItem = function() {
                    list_item.$remove();
                };
                this.editItem = function() {
                    list_item.$push();
                    list_item.item.$push();
                    list_item.item.preference.$push();
                };
                this.cancelItem = function() {
                    list_item.$pop();
                };
                this.finishItem = function() {
                    list_item.$discard();
                    list_item.item.$discard();
                    list_item.item.preference.$discard();
                    list_item.$save();
                    list_item.item.$save();
                    list_item.item.preference.$save();
                };
                this.showItemDialog = function(list_item, ev) {
                    var ctrl = this;
                    var promise = $mdDialog.show({
                        controller: function($scope, $mdDialog) {
                            ctrl.editItem();
                            $scope.list_item = list_item;
                            $scope.cancel = function() {
                                $mdDialog.cancel();
                            };
                            $scope.answer = function() {
                                $mdDialog.hide(list_item);
                            };
                        },
                        template: rkItemDialogTemplate.innerHTML,
                        parent: angular.element(document.body),
                        targetEvent: ev,
                        clickOutsideToClose: true,
                        fullscreen: $mdMedia('sm') || $mdMedia('xs')
                    });
                    promise.then(function onAnswer(answer) {
                        ctrl.finishItem();
                    }, function onCancel() {
                        ctrl.cancelItem();
                    });;
                };

this.itemActions = [{
                    label: 'Edit',
                    icon: 'fa-pencil',
                    action: this.showItemDialog
                }, {
                    label: 'Remove',
                    icon: 'fa-times',
                    action: this.removeItem
                }];
            }
        }
    })
    .directive('rkMainMenu', function() {
        return {
            replace: true,
            template: rkMainMenuTemplate.innerHTML,
            controllerAs: 'menuCtrl',
            controller: function($mdSidenav) {
                // Main Menu
                this.menu = [{
                    label: 'Lists',
                    icon: 'fa-tasks'
                }, ];
                this.close = function() {
                    $mdSidenav('left').close();
                };
                this.open = function() {
                    $mdSidenav('left').open();
                };
            }
        }
    })
    .directive('rkEnter', function() {
        return function(scope, element, attrs) {
            element.bind("keydown keypress", function(event) {
                if (event.which == 13) {
                    scope.$apply(attrs.rkEnter);
                    event.preventDefault();
                }
            });
        };
    })
    .directive('rkActionMenu', function() {
        return {
            scope: {
                icon: '@',
                actions: '<',
                context: '<',
                argument: '<',
                onAction: '&'
            },
            template: rkActionMenuTemplate.innerHTML,
            controllerAs: 'actionMenu',
            controller: function() {
                this.performAction = function($scope, actionItem, $event) {
                    if (actionItem.action) {
                        actionItem.action.call(actionItem.context || $scope.context, $scope.argument, $event, actionItem);
                    } else {
                        $scope.onAction({
                            arg: $scope.argument,
                            action: actionItem,
                            $event: $event
                        });
                    }
                };
            }
        }
    })

编译

CSS

.fa {
    font-size: 1.4em;
}
[ng-app] {
    height: 100%;
}
.rk-no-padded,
.rk-no-padded md-input-container {
    margin: 0px;
}
.md-block.rk-padded {
    margin: 18px 20px 0px 20px;
}
.rk-light-highlight {
    background-color: #f9f9f9;
}
._md-secondary-container,
._md-list-item-inner {
    height: auto !important;
}
._md-subheader-inner {
    padding: 4px !important;
}
md-list-item ._md-list-item-inner>md-checkbox,
md-list-item>md-checkbox {
    margin-right: 16px;
}
md-list-item.md-2-line,
md-list-item.md-2-line>._md-no-style {
    min-height: 52px;
}
#container {
    height: 100%;
}
.full-width {
    width: 100%;
}
.float-right {
    float: right;
}
.align-left {
    text-align: left;
}
.padded-top {
    padding-top: 16px;
}
.rk-hover-hide .rk-hover-hide-item {
    opacity: 0.1;
}
.rk-hover-hide:hover .rk-hover-hide-item {
    opacity: 1.0;
}
@media(max-width:600px) {
    .rk-hover-hide .rk-hover-hide-item {
        opacity: 1.0;
    }
}
.md-errors-spacer:empty {
    height: 0 !important;
    min-height: 0 !important;
}
.md-button.md-small-button {
    padding: 0;
    margin: 0;
}
.item-tag {
    font-size: 12px;
    color: #333;
    background-color: #eee;
    border-radius: 6px;
    padding: 2px 8px;
    margin: 0px;
    margin-right: 4px;
}
.item-tag .fa {
    font-size: 11px;
}
.md-scroll-mask {
    display: none;
}

HTML

<div ng-app="proto" ng-cloak>
    <div ng-controller="ListController as ctrl" layout="column" id="container">
        <section layout="row" flex>
            <rk-main-menu></rk-main-menu>
            <md-content flex>
                <md-toolbar md-scroll-shrink>
                    <div class="md-toolbar-tools">
                        <md-button class="md-icon-button" aria-label="Settings" ng-click="ctrl.openMainMenu()">
                            <md-icon md-font-icon="fa-bars" class="fa" alt="Settings"></md-icon>
                        </md-button>
                        <h3><b>Lists</b></h3>
                        <span flex></span>
                        <md-button class="md-raised" aria-label="Add List" ng-click="ctrl.addList()">
                            <md-icon md-font-icon="fa-plus" class="fa" alt="Add List"></md-icon>&nbsp;&nbsp;List
                        </md-button>
                        <md-button class="md-icon-button" aria-label="More" ng-click="ctrl.refreshAll()">
                            <md-icon md-font-icon="fa-refresh" class="fa" alt="More"></md-icon>
                        </md-button>
                    </div>
                </md-toolbar>
                <md-content>
                    <section>
                        <md-subheader class="md-primary md-no-sticky">

<table class="full-width" ng-if="!ctrl.addingList && !ctrl.renamingList">
                                <tr>
                                    <td class="full-width">
                                        <md-menu md-position-mode="target-left target">
                                            <md-button class="full-width align-left" aria-label="Lists" ng-click="$mdOpenMenu($event)" style="margin: 0">
                                                <md-icon md-font-icon="fa-sort-desc" class="fa float-right" alt="Lists"></md-icon>
                                                {{ ctrl.getDropdownLabel() }}
                                            </md-button>
                                            <md-menu-content width="6">
                                                <md-menu-item ng-repeat="s in ctrl.lists">
                                                    <md-button ng-click="ctrl.list = s">{{ s.name }}</md-button>
                                                </md-menu-item>
                                            </md-menu-content>
                                        </md-menu>
                                    </td>
                                    <td ng-show="ctrl.list">
                                        <rk-action-menu icon="fa-bolt" actions="ctrl.listActions" context="ctrl" argument="ctrl.list"></rk-action-menu>
                                    </td>
                                </tr>
                            </table>
                        </md-subheader>
                        <div ng-if="ctrl.list">
                            <rk-item-editor list="ctrl.list"></rk-item-editor>
                            <md-list>
                                <rk-item ng-repeat="list_item in ctrl.list.items | models" list-item="list_item" ctrl="ctrl"></rk-item>
                            </md-list>
                        </div>
                    </section>
                </md-content>
            </md-content>
        </section>
    </div>
</div>

Record Lists, 带分类过滤功能。 Firebase是Google提供的一款BaaS产品，即把管理后台/数据后台作为一个云端服务提供给移动应用开发者。Firebase本质上是和NodeJS类似的实时JS开发框架。

angular, firebase, list, app

编辑器支持Emmet

快捷键

Record Lists, 带分类过滤功能。 Firebase是Google提供的一款BaaS产品，即把管理后台/数据后台作为一个云端服务提供给移动应用开发者。Firebase本质上是和NodeJS类似的实时JS开发框架。

angular, firebase, list, app

使用Angular.js实现自定义的Addthis社交分享插件界面和指令

使用AngularJS实现的一款很棒的日历控件

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：