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

最新推荐文章于 2025-08-18 17:55:19 发布

转载最新推荐文章于 2025-08-18 17:55:19 发布 · 58 阅读

文章标签：

#json #javascript #ViewUI

本文介绍如何使用Angular结合Firebase实现数据的实时同步与CRUD操作。通过示例代码展示了如何创建项目，连接Firebase，并进行数据的添加、更新和删除。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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