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. [转]如何在 JS 代码中消灭 for 循环

    一,用好 filter,map,和其它 ES6 新增的高阶遍历函数 二,理解和熟练使用 reduce 三,用递归代替循环(可以break!) 四,使用高阶函数遍历数组时可能遇到的陷阱 五,死磕到底,T ...

  2. Oracle意外赢官司，程序员或过苦日子

    关于“Google在Android平台使用Java侵犯知识产权”一案,2014年5月,联邦法院判定Oracle获胜,这个结果完全出人意料,因为这样一来无异于打开了软件开发领域中API使用方式的潘多拉之 ...

  3. prim 算法和 kruskal算法

    Prim算法 1.概览 普里姆算法(Prim算法),图论中的一种算法,可在加权连通图里搜索最小生成树.意即由此算法搜索到的边子集所构成的树中,不但包括了连通图里的所有顶点(英语:Vertex (gra ...

  4. 初探 Spring Boot

    近些年Spring Boot都特别火,一直都想来学习学习,奈何近期公司项目繁忙,一直都没有时间来学习,今天终于是休息一天,于是来一睹 SpringBoot 的风采. 一.什么是Spring Boot ...

  5. android studio 安卓工作室 汉化完整版

    韩梦飞沙  韩亚飞  313134555@qq.com  yue31313  han_meng_fei_sha 汉化包 百度云盘 下载地址:https://pan.baidu.com/s/1pLjwy ...

  6. Hash表及hash算法的分析

    Hash表中的一些原理/概念,及根据这些原理/概念: 一.       Hash表概念 二.       Hash构造函数的方法,及适用范围 三.       Hash处理冲突方法,各自特征 四.   ...

  7. JSONObject 和 JSONArray 的区别和用法

    JSONObject 和 JSONArray 的数据表现形式不同: JSONObject的数据是用 {  } 来表示的,例如: { "id" : "1", &q ...

  8. 《时间序列分析——基于R》王燕，读书笔记

    笔记: 一.检验: 1.平稳性检验: 图检验方法:     时序图检验:该序列有明显的趋势性或周期性,则不是平稳序列     自相关图检验:(acf函数)平稳序列具有短期相关性,即随着延迟期数k的增加 ...

  9. hihocoder 1522 : F1 Score

    题目链接   时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi和他的小伙伴们一起写了很多代码.时间一久有些代码究竟是不是自己写的,小Hi也分辨不出来了. 于是他实现 ...

  10. [原]Redis详细配置介绍

    Redis详细配置介绍 # redis 配置文件示例 # 当你需要为某个配置项指定内存大小的时候,必须要带上单位, # 通常的格式就是 1k 5gb 4m 等酱紫: # # 1k => 1000 ...