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. 【2-SAT】The Ministers’ Major Mess UVALive – 4452

    题目链接:https://cn.vjudge.net/contest/209474#problem/C 题目大意: 一共有m个提案,n个政客,每个政客都会对一些提案(最多四个)提出自己的意见——通过或 ...

  2. 【Python】闭包Closure

    原来这就是闭包啊... 还是上次面试,被问只不知掉js里面的闭包 闭包,没听过啊...什么是闭包 回来查了下,原来这货叫闭包啊...... —————————————————————————————— ...

  3. 使用matplotlib绘图（四）之散点图

    # 使用matplotlib绘制散点图 import numpy as np import matplotlib.pyplot as plt # 设置全局刻度标签大小 plt.rcParams['xt ...

  4. redis_NoSql入门概述

    一.为什么要使用Nosql 今天我们可以通过第三方平台(如:google,facebook)可以很容易的访问和抓取数据.用户的个人信息,社交网络,地理位置,用户生成的数据和用户操作日志已经成倍的增加. ...

  5. CodeForces 606C Sorting Railway Cars（最长连续上升子序列）

    Description An infinitely long railway has a train consisting of n cars, numbered from 1 to n (the n ...

  6. 「CSA72」MST

    「CSA72」MST 题目大意:有一个大小为 \(n\) 的无向完全图,\(x, y\) 之间的边权值为 \(a[\min(x,y)][\max(x,y)]\) ,初始为0,进行 \(m\) 次修改, ...

  7. [BZOJ2427][HAOI2010]软件安装(Tarjan+DP)

    2427: [HAOI2010]软件安装 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 1987  Solved: 791[Submit][Statu ...

  8. Ubuntu 无线驱动问题

    最近一次更新系统后开机发现电脑只能连有线网络连不上无线网络.我平时都是连无线网络,没有买网线.所以查了下无线驱动相关问题资料,发现是由于更新系统造成无线网卡驱动莫名不见了.刚开始还以为是电脑将无线禁用 ...

  9. [转]Android之Activity的几种跳转方式

     1.显示调用方法 Intent intent=new Intent(this,OtherActivity.class);  //方法1 Intent intent2=new Intent(); in ...

  10. jquery 常用获取值得方法汇总

    jquery取radio单选按钮的值$("input[name='items']:checked").val();jquery radio取值,checkbox取值,select取 ...