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. Servlet技术——常用的类和接口

    Servlet是运行在服务器端的Java应用程序,由Servlet容器对其进行管理. 当用户对容器发送HTTP请求时,容器将通知相应的Servlet对象进行处理,完成用户和程序之间的交互. 在Serv ...

  2. Bzoj5188/洛谷P4185 [Usaco2018 Jan]MooTube（并查集）

    题面 Bzoj 洛谷 题解 最暴力的方法是直接判两个点之间的路径最小值是否\(\geq k\),用\(Dijkstra\)可以做到该算法最快效率,但是空间复杂度始终是\(O(n^2)\)的,会\(ML ...

  3. 备份Kylin的Metadata

    元数据是Kylin中最重要的数据之一,备份元数据时运维工作中一个至关重要的环节.只有这样,在由于误操作导致整个Kylin服务或某个Cube异常时,才能将Kylin快速从备份中恢复出来. Kylin组织 ...

  4. JAVA中常见异常小结

    1.java.lang.ArithmeticException 算术运算异常,例如除数为0,所以引发了算数异常 2.Java.lang.StringIndexOutOfBoundsException: ...

  5. linux——(8)数据流重定向、管道命令

    概念一:数据流重定向 数据流分输入流和输出流,还有一个标准错误流,负责管理出错信息,比如一般的命令的输出会输出到屏幕上,我们可以用重定向让他输入到某个文件内. 相关操作: 1,标准输入(stdin): ...

  6. FastReport.Net使用：[18]形状(Shape)控件用法

    FastReport中,如果要画一张漂亮的报表,经常会画些形状控件来美化?那么如何用好形状(Shape)控件呢? 形状的5种类型 在工具栏的图形控件下拉菜单中有5种类型(矩形.圆角矩形.椭圆形.三角形 ...

  7. Hibernate 条件-分页查询

    这里我们继续跟着上一次的节奏继续学习Hibernate的查询. 1.条件查询一(占位符) 按照占位符的方式进行条件查询,这里query有一个setInteger(arg1, arg2)方法,其中第一个 ...

  8. 【BZOJ 1449】 1449: [JSOI2009]球队收益 （最小费用流）

    1449: [JSOI2009]球队收益 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 841  Solved: 483 Description Inpu ...

  9. android jni 内部 以及 安卓 init 分析

    韩梦飞沙  韩亚飞  313134555@qq.com  yue31313  han_meng_fei_sha

  10. UVA11468 Substring --- AC自动机 + 概率DP

    UVA11468 Substring 题目描述: 给定一些子串T1...Tn 每次随机选择一个字符(概率会给出) 构造一个长为n的串S,求T1...Tn不是S的子串的概率 直接把T1...Tn建成AC ...