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.
