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. Java面向对象封装和继承

    面向对象 什么是面向过程.面向对象? 面向过程与面向对象都是我们编程中,编写程序的一种思维方式. 面向过程的程序设计方式,是遇到一件事时,思考“我该怎么做”,然后一步步实现的过程.例如:公司打扫卫生( ...

  2. Xml配置文件属性的说明

    Xml配置文件属性的说明: <bean id="TheAction" ⑴ class="net.xiaxin.spring.qs.UpperAction" ...

  3. php获取当前域名、主机、URL、端口、参数、网址、路径、代理等【转】

    <?php //获取域名或主机地址 echo $_SERVER['HTTP_HOST']."<br />"; //获取网页地址 echo $_SERVER['PH ...

  4. hibernate4日志配置

    在平时运行程序时控制台有很对的日志打印,本文说明如何控制这些日志打印. 1.确定要使用日志的实现,我在这使用的是log4j. 2.加入log4j的api包slf4j-api.jar,log4j的转换包 ...

  5. Android:Date、String、Long三种日期类型之间的相互转换

    源地址:http://blog.csdn.net/wangyanguiyiyang date类型转换为String类型: // formatType格式为yyyy-MM-dd HH:mm:ss//yy ...

  6. [CC-STREETTA]The Street

    [CC-STREETTA]The Street 题目大意: 给定两个长度为\(n(n\le10^9)\)的数列\(A\)和\(B\),开始数列\(A\)中每一项值为\(-\infty\),数列\(B\ ...

  7. HDU 5670 Machine 水题

    Machine 题目连接: http://acm.hdu.edu.cn/showproblem.php?pid=5670 Description There is a machine with m(2 ...

  8. HDU 5645 DZY Loves Balls 水题

    DZY Loves Balls 题目连接: http://acm.hdu.edu.cn/showproblem.php?pid=5645 Description DZY loves playing b ...

  9. 卡尔曼滤波（Kalman Filter）在目标边框预测中的应用

    1.卡尔曼滤波的导论 卡尔曼滤波器(Kalman Filter),是由匈牙利数学家Rudolf Emil Kalman发明,并以其名字命名.卡尔曼出生于1930年匈牙利首都布达佩斯.1953,1954 ...

  10. DAC calibrates 4- to 20-mA output current

    Industrial controls make heavy use of 4- to 20-mA current loops to transmit process measurements bec ...