The idea: This post we are going to learn how to build a Firebase Forage with object related database.

Form the pic we can see that there are two object: users and items. This helps to orginzie the data structure better.

The way to do this is following:

We have a base firebase uri

app.constant('FIREBASE_URI', 'https://zhentiw-angular-fire.firebaseio.com/');

Here we create a users object database:

var userRef = new Firebase(FIREBASE_URI + 'users');

Here is how we create a items object database:

var ref = new Firebase(FIREBASE_URI + 'items');

Yeap, it is quite simple and not hard at all. But for the beginner we have comfuses at the begining.

Here is an example how we add data into those two objects.

We have an select tag for display all users.

        <select class="form-control" ng-model="currentUser" ng-options="userId as user.name for (userId, user) in users">

            <option value="">Select a user</option>

        </select>

Notice the words here:

　　userId as user.name for (userId, user) in users, looks like coffeeScript

Then forms for add users and items, and also for displaying items.

Code:

<!DOCTYPE html>

<html ng-app="app">

<head lang="en">

    <meta charset="UTF-8">

    <title>Angular Firebase</title>

    <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>

    <link href="bower_components/angular-material/angular-material.min.css" rel="stylesheet" />

</head>

<body ng-controller="MainCtrl">

<ui-view>

    <button class="btn-info" ui-sref="login()">FirebaseSimpleLogin</button>

    <h2>Current User</h2>

    <div class="well">

        <select class="form-control" ng-model="currentUser" ng-options="userId as user.name for (userId, user) in users">

            <option value="">Select a user</option>

        </select>

        <h3>Add User</h3>

        <form class="form-inline" role="form" novalidate ng-submit="addUser()">

            <div class="form-group">

                <input type="text" class="form-control" ng-model="newUser.name" placeholder="Name">

            </div>

            <button type="submit" class="btn btn-default">Add</button>

        </form>

    </div>

    <h2>Current Item</h2>

    <table class="table edit">

        <thead>

        <tr>

            <th>Name</th>

            <th>Description</th>

            <th>Count</th>

            <th></th>

        </tr>

        </thead>

        <tbody>

        <tr ng-repeat="(id, item) in items">

            <td><input type="text" ng-model="item.name" ng-blur="updateItem(id)"/></td>

            <td><input type="text" ng-model="item.description" ng-blur="updateItem(id)"/></td>

            <td><input type="text" ng-model="item.count" ng-blur="updateItem(id)"/></td>

            <td>

                <a href="#" ng-click="removeItem(id)" class="navbar-link">Remove</a>

            </td>

        </tr>

        </tbody>

    </table>

    <div class="well">

        <h4>Add Item</h4>

        <form class="form-inline" role="form" novalidate ng-submit="addItem()">

            <div class="form-group">

                <input type="text" class="form-control" ng-model="newItem.name" placeholder="Name">

            </div>

            <div class="form-group">

                <input type="text" class="form-control" ng-model="newItem.description" placeholder="Description">

            </div>

            <div class="form-group">

                <input type="text" class="form-control" ng-model="newItem.count" placeholder="Count">

            </div>

            <button type="submit" class="btn btn-default">Add</button>

        </form>

    </div>

</ui-view>

<script src="bower_components/jquery/dist/jquery.min.js"></script>

<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>

<script src="bower_components/angular/angular.min.js"></script>

<script src="bower_components/angular-material/angular-material.js"></script>

<script src="bower_components/firebase/firebase.js"></script>

<script src="https://cdn.firebase.com/libs/angularfire/0.6.0/angularfire.js"></script>

<script src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>

<script src="bower_components/oclazyload/dist/ocLazyLoad.min.js"></script>

<script src="public/js/app.js"></script>

</body>

</html>
/**

 * Created by Answer1215 on 11/9/2014.

 */

var app = angular.module('app', ['ui.router','firebase', 'oc.lazyLoad']);

app.constant('FIREBASE_URI', 'https://<your app>.firebaseio.com/');

app.config(function($stateProvider){

    $stateProvider

        .state('login', {

            url: '/login',

            templateUrl: 'public/login.tmpl.html',

            controller: 'LoginCtrl',

            resolve: {

                'login@': function($ocLazyLoad){

                    return $ocLazyLoad.load(

                        {

                            name: "login",  //module name is "store"

                            files: ["public/js/login.js",

                            'bower_components/firebase-simple-login/firebase-simple-login.js']

                        }

                    )

                }

        }});

});

app.controller('MainCtrl', ['$scope', 'ItemsService', 'UserService',function ($scope, ItemsService, UserService) {

    $scope.newItem = { name: '', description: '', count: 0 };

    $scope.newUser = {name: ''};

    $scope.currentItem = null;

    $scope.isUpdated = false;

    $scope.items = ItemsService.getItems();

    $scope.users = UserService.getUsers();

    $scope.items.$on('change', function(){

        if(!$scope.isUpdated){return;}

        console.log("ITEMS CHANGE");

    });

    $scope.items.$on('loaded', function(){

        console.log("ITEMS LOADED");

    });

    //Deattach the change event from the items

    //$scope.items.$off('change');

    $scope.addItem = function () {

        ItemsService.addItem(angular.copy($scope.newItem));

        $scope.newItem = { name: '', description: '', count: 0 };

    };

    $scope.updateItem = function (id){

        $scope.isUpdated = true;

        ItemsService.updateItem(id);

    };

    $scope.removeItem = function (id) {

        ItemsService.removeItem(id);

    };

    $scope.addUser = function(){

        UserService.addUser(angular.copy($scope.newUser));

        $scope.newUser = {name: ''};

    }

}]);

app.factory('UserService', ['$firebase', 'FIREBASE_URI', function ($firebase, FIREBASE_URI) {

    var userRef = new Firebase(FIREBASE_URI + 'users');

    var users = $firebase(userRef);

    var getUsers = function () {

        return users;

    };

    var addUser = function (user) {

        users.$add(user);

    };

    return {

        getUsers: getUsers,

        addUser: addUser

    }

}]);

app.factory('ItemsService', ['$firebase', 'FIREBASE_URI', function ($firebase, FIREBASE_URI) {

    var ref = new Firebase(FIREBASE_URI + 'items');

    var items = $firebase(ref);

    var getItems = function () {

        return items;

    };

    var addItem = function (item) {

        items.$add(item);

    };

    var updateItem = function (id) {

        items.$save(id);

    };

    var removeItem = function (id) {

        items.$remove(id);

    };

    return {

        getItems: getItems,

        addItem: addItem,

        updateItem: updateItem,

        removeItem: removeItem

    }

}]);

[Firebase] 4. Firebase Object related Database的更多相关文章

  1. [React Native + Firebase] React Native: Real time database with Firebase -- setup & CRUD

    Install: npm i --save firebase // v3.2.1 Config Firebase: First we need to require Firebase: import ...

  2. Linked Server: EXECUTE permission denied on object 'xp_prop_oledb_provider', database 'master', owner 'dbo'

    问题出现环境: 使用SQL Server Management Studio 2008 连接到SQL Server 2000的数据库,点击其中一个Oracle链接服务器,单击"目录" ...

  3. 数据库内存泄漏——A SQLiteConnection object for database '/data/data/.../databases/....db' was leaked!

      详细异常: A SQLiteConnection object for database '/data/data/.../database/....db' was leaked!  Please ...

  4. PASCAL VOC数据集The PASCAL Object Recognition Database Collection

    The PASCAL Object Recognition Database Collection News 04-Apr-07: The VOC2007 challenge development ...

  5. A SQLiteConnection object for database '/data/data/.../databases/....db' was leaked!

      详细异常: A SQLiteConnection object for database '/data/data/.../databases/....db' was leaked!  Please ...

  6. profile name is not valid，The EXECUTE permission was denied on the object 'sp_send_dbmail', database 'msdb', schema 'dbo'.

    使用不是sysadmin权限的账号执行存储发邮件,报异常profile name is not valid, EXEC msdb.dbo.sp_send_dbmail @profile_name = ...

  7. JDBC ORM（Object Relationship Database Mapping）

    ORM=Object Relationship Database Mapping 对象和关系数据库的映射 简单说,一个对象,对应数据库里的一条记录 示例:根据id返回一个Hero对象 提供方法get( ...

  8. [Firebase] 2. Firebase Event Handling

    /** * Created by Answer1215 on 11/9/2014. */ var app = angular.module('app', ['firebase']); app.cons ...

  9. [Firebase] 3. Firebase Simple Login Form

    Using $firebaseSimpleLogin service. Here we use three methods for login, logout, register and getCur ...

随机推荐

  1. zookpeer应用和zkclient实践

    分布式 zkclient 排它锁 在需要获取排它锁时,通过调用create()接口,创建临时子节点.zk会保证在所有客户端中,只有一个会创建成功,从而获取锁. 其他客户端注册该节点的变更watch监听 ...

  2. CentOS服务器安装Telnet来远程连接服务器

    0.目录 整体架构目录:ASP.NET Core分布式项目实战-目录 一.前言 在连接远程服务器时有很多种连接方式,如SSH.telnet.SFTP等.但是如果大家在docker上面安装gitlab做 ...

  3. python 进程间通信(下)

    利用 Value,Array   先说明这个方法并不常用,因为有更灵活的方法 from multiprocessing import Process,Value,Array def f(n,a,not ...

  4. bzoj1715 虫洞

    Description John在他的农场中闲逛时发现了许多虫洞.虫洞可以看作一条十分奇特的有向边,并可以使你返回到过去的一个时刻(相对你进入虫洞之前).John的每个农场有M条小路(无向边)连接着N ...

  5. Windows下Apache2.2+PHP5安装步骤

    Windows下Apache2.2+PHP5安装 初学者在学习PHP的时候可能都会遇到安装Apache和PHP不成功的问题,于是很多开发者便选择了集成包,一键安装好Apache+PHP+MySQL.但 ...

  6. [转]Android Studio常用快捷键

    (会持续更新)这边讲的常用快捷键是指做完Keymap到Eclipse后的,不是纯Android Studio的,这边主要讲下比较常用的一些快捷键: Ctrl+G / Ctrl+Alt+Shift+G: ...

  7. HDU 4619 Warm up 2 最大独立集

    Warm up 2 题目连接: http://acm.hdu.edu.cn/showproblem.php?pid=4619 Description Some 1×2 dominoes are pla ...

  8. UESTC 2015dp专题 j 男神的约会 bfs

    男神的约会 Time Limit: 20 Sec  Memory Limit: 256 MB 题目连接 http://acm.uestc.edu.cn/#/contest/show/65 Descri ...

  9. Pandas中Series和DataFrame的索引

    在对Series对象和DataFrame对象进行索引的时候要明确这么一个概念:是使用下标进行索引,还是使用关键字进行索引.比如list进行索引的时候使用的是下标,而dict索引的时候使用的是关键字. ...

  10. mysqldump之字符集问题解决

    最近导数据的需求真多,年底了大家都要做分析吗?近期使用mysqldump导出的中文出现乱码问题. mysqldump -uroot -ppassword -S /tmp/mysql9991.sock ...