[Firebase] 1. AngularFire, $save, $add and $remove, Forge

Basic angularFire options: $save, $add and $remove.

The way connect firebase:

var app = angular.module('app', ['firebase']);
    var ref = new Firebase(FIREBASE_URI);
    //create an item storage
    var items = $firebase(ref);

 

Example:

<!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"/>

</head>
<body ng-controller="MainCtrl">
<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>

<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
<script src="https://cdn.firebase.com/v0/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.6.0/angularfire.js"></script>
<script src="public/js/app.js"></script>
</body>
</html>

 

/**
 * Created by Answer1215 on 11/9/2014.
 */

var app = angular.module('app', ['firebase']);

app.constant('FIREBASE_URI', 'https://<your_app>.firebaseio.com/');

app.controller('MainCtrl', ['$scope', 'ItemsService', function ($scope, ItemsService) {
    $scope.newItem = { name: '', description: '', count: 0 };
    $scope.currentItem = null;

    $scope.items = ItemsService.getItems();

    $scope.addItem = function () {
        ItemsService.addItem(angular.copy($scope.newItem));
        $scope.newItem = { name: '', description: '', count: 0 };
    };

    $scope.updateItem = function (id) {
        ItemsService.updateItem(id);
    };

    $scope.removeItem = function (id) {
        ItemsService.removeItem(id);
    };
}]);

app.factory('ItemsService', ['$firebase', 'FIREBASE_URI', function ($firebase, FIREBASE_URI) {
    var ref = new Firebase(FIREBASE_URI);
    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
    }
}]);

 

Also take a look the Forge, The easy way you can go to your app's forage is copy paste the FIREBASE_URI into boswer.

In Forge, you can modify, remove or add the data. Also you can import JSON format data into the Forage, all those things happen in real time.

posted @ 2014-11-10 07:00  Zhentiw  阅读(906)  评论(0)  编辑  收藏  举报