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.

[Firebase] 1. AngularFire, $save, $add and $remove, Forge的更多相关文章

  1. eclipse tomcat add and remove工程异常

    1  eclipse导入工程后,右击server add and remove工程时,there are no resource: 解决方案:右击工程->单击property->选择pro ...

  2. eclipse中tomcat使用add and remove无法发布web项目

    继上次启动eclipse中的tomcat报classNotFound的问题后,这次又遇到新问题.就是右键点击tomcat使用add and remove发布web项目至tomcat后,启动tomcat ...

  3. [置顶] 有关ListIterator接口的add与remove方法探究

    ListIterator接口继承自Iterator接口,新增了add()等方法. 关于ListIterator的add()方法的作用(接口是没有方法实现的,但其实现类对于add()方法的实现机制大致相 ...

  4. Arrays.asList 为什么不能 add 或者 remove 而 ArrayList 可以

    分析如下例子: 1 import java.util.Arrays; 2 import java.util.List; 3 4 5 public class Test { 6 public stati ...

  5. eclipse中tomcat的add and Remove找不到项目

    在我们运行项目前,都需要将项目部署到tomcat上,但是有时我们会遇到这种情况:项目明明存在,但是eclipse中tomcat的add and remove找不到项目,无法部署,那么这个问题该如何解决 ...

  6. 数组转换为List(Arrays.asList)后add或remove出现UnsupportedOperationException

    Java中,可以使用Arrays.asList(T... a)方法来把一个数组转换为List,返回一个受指定数组支持的固定大小(注意是固定大小)的列表.此方法同 Collection.toArray( ...

  7. 【java】在分页查询结果中对最后的结果集List进行操作add()或remove()操作，报错：java.lang.UnsupportedOperationException

    场景: 在分页查询结果中对最后的结果集List进行操作add()或remove()操作,报错:java.lang.UnsupportedOperationException 错误: java.lang ...

  8. Arrays.asList()后调用add，remove这些method时出现java.lang.UnsupportedOperationException异常

    String[] queryNames = request.getParameterValues("queryName"); List<String> queryNam ...

  9. 为什么Java里的Arrays.asList不能用add和remove方法？

    在平时的开发过程中,我们知道能够将一个Array的对象转化为List.这种操作,我们仅仅要採用Arrays.asList这种方法即可了.笔者前段时间一直用这种方法,有一天,我发现通过Arrays.as ...

随机推荐

  1. STM32使用定时器实现输入捕获

    输入捕获简介输入捕获模式可以用来测量脉冲宽度或者测量频率.STM32的定时器,除了TIM6和TIM7,其他定时器都有输入捕获功能. STM32的输入捕获,简单地说就是通过检测TIMx_CHx上的边沿信 ...

  2. Django+Nginx+uwsgi搭建自己的博客（一）

    最近对写爬虫有些厌倦了,于是将方向转移到了Web开发上.其实在之前自己也看过一部分Flask的资料,但总觉得Flask的资料有些零散,而且需要的各种扩展也非常多.因此,我将研究方向转移到了另一个主流的 ...

  3. brpc初探

    因为最近在看一个内部开源代码,看到了braft.braft又依赖于brpc.于是就看了相关的文档,打算接下来试一把. 这里引用下gejun大佬在知乎上的回答(https://www.zhihu.com ...

  4. WPF TreeGrid的一种简单实现

    前几天,各种坑爹的情况,导致不得不自己去动手实现带层级关系的Grid.之后翻了翻书,貌似说msdn和codeproject上有这么个例子,叫做TreeListView.这里就简单说下自己的思路,也许有 ...

  5. 【Pollard-rho算法】【DFS】poj2429 GCD & LCM Inverse

    题意:给你一两个数m和n,它们分别是某对数A,B的gcd和lcm,让你求出一对使得A+B最小的A,B. n/m的所有质因子中,一定有一部分是只在A中的,另一部分是只在B中的. 于是对n/m质因子分解后 ...

  6. [转]Android Studio开发入门-引用jar及so文件

    注意: 1.jar包在app的libs目录 2.so文件放在src/main”目录中名为“jniLibs”的目录 一.引用jar文件    1.将jar文件复制.粘贴到app的libs目录中:    ...

  7. SPOJ 7001. Visible Lattice Points （莫比乌斯反演）

    7001. Visible Lattice Points Problem code: VLATTICE Consider a N*N*N lattice. One corner is at (0,0, ...

  8. POJ 1286 Necklace of Beads（Polya简单应用）

    Necklace of Beads 大意:3种颜色的珠子,n个串在一起,旋转变换跟反转变换假设同样就算是同一种,问会有多少种不同的组合. 思路:正规学Polya的第一道题,在楠神的带领下,理解的还算挺 ...

  9. Redis 3.0版本启动时出现警告的解决办法

    原文:http://m.blog.csdn.net/article/details?id=50864933 Redis 3.0.7版本启动时出现警告的解决办法 发表于2016/3/12 12:52:4 ...

  10. VMware 11.0 简体中文版|附永久密钥

    20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送) 国内私募机构九鼎控股打造,九鼎投资是在全国股 ...