继续旅程：从头开始使用 AngularJS 和 Firebase 构建 Web 应用程序：第 2 部分

继续旅程：从头开始使用 AngularJS 和 Firebase 构建 Web 应用程序第 2 部分

（图片来源网络，侵删）

在上文的第1部分中，我们介绍了如何设置AngularJS环境和Firebase项目，现在，在第2部分中，我们将深入探讨如何使用AngularJS来创建用户界面，并将数据与Firebase集成。

创建AngularJS控制器

我们需要创建一个控制器来管理我们的应用程序逻辑，在AngularJS中，一个控制器是一个JavaScript函数，它通过$scope对象与视图交互。

1、打开你的文本编辑器，并创建一个新的文件app.js。

2、在该文件中，我们将定义一个名为AppController的控制器。

angular.module('myApp', [])
.controller('AppController', ['$scope', function($scope) {
    // 初始化数据
    $scope.message = 'Hello, AngularJS and Firebase!';
}]);

设置HTML模板

接下来，我们要设置HTML模板来显示我们的信息。

1、在你的index.html文件中，引入app.js脚本。

2、在body标签内，添加一个带有ngapp指令的div，以声明我们的AngularJS应用。

3、在div内部，使用ngcontroller指令来关联我们的AppController。

4、使用{{ }}绑定来显示$scope.message的内容。

<!DOCTYPE html>
<html ngapp="myApp">
<head>
    <!...其他头部信息... >
</head>
<body ngcontroller="AppController">
    <h1>{{ message }}</h1>
    <!...其他内容... >
    <script src="app.js"></script>
</body>
</html>

集成Firebase

现在我们有了基本的AngularJS应用，接下来让我们将其与Firebase集成起来。

1、你需要在index.html中包含Firebase的JavaScript SDK。

2、我们还需要一个新的服务来处理Firebase的连接和操作。

创建一个新文件firebaseService.js，并添加以下代码：

angular.module('myApp')
.factory('FirebaseService', ['$firebaseArray', function($firebaseArray) {
    var ref = firebase.database().ref();
    var items = $firebaseArray(ref);
    return {
        all: function() {
            return items;
        },
        get: function(id) {
            return items[id];
        },
        add: function(item) {
            ref.push(item);
        },
        remove: function(id) {
            delete items[id];
        }
    };
}]);

更新控制器使用FirebaseService

更新AppController来使用我们刚刚创建的FirebaseService。

angular.module('myApp')
.controller('AppController', ['$scope', 'FirebaseService', function($scope, FirebaseService) {
    $scope.items = FirebaseService.all();
    $scope.addItem = function() {
        var name = $scope.newItemName;
        var url = $scope.newItemUrl;
        if (name && url) {
            FirebaseService.add({ name: name, url: url });
            $scope.newItemName = '';
            $scope.newItemUrl = '';
        }
    };
    $scope.removeItem = function(id) {
        FirebaseService.remove(id);
    };
}]);

更新HTML模板以显示和操作数据

我们需要更新index.html中的模板来显示数据，并提供添加和删除项的功能。

<body ngcontroller="AppController">
    <h1>My App</h1>
    <ul>
        <li ngrepeat="item in items track by $index">
            <a nghref="{{ item.url }}">{{ item.name }}</a>
            <button ngclick="removeItem($index)">Remove</button>
        </li>
    </ul>
    <form ngsubmit="addItem()">
        <input type="text" ngmodel="newItemName" placeholder="Name">
        <input type="text" ngmodel="newItemUrl" placeholder="URL">
        <button type="submit">Add</button>
    </form>
    <script src="app.js"></script>
    <script src="firebaseService.js"></script>
</body>

这样，我们就完成了一个基本的AngularJS和Firebase集成的Web应用，用户可以看到一个列表，可以添加新的链接，并且这些链接会实时保存到Firebase数据库中，这个示例展示了如何使用AngularJS构建用户界面，以及如何利用Firebase作为后端来存储和管理数据。

原创文章，作者：未希，如若转载，请注明出处：https://www.kdun.com/ask/483339.html

本网站发布或转载的文章及图片均来自网络，其原创性以及文中表达的观点和判断不代表本网站。如有问题，请联系客服处理。