[Firebase] 4. Firebase Object related Database

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.

[Firebase] 4. Firebase Object related Database

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
    }
}]);