继续旅程：从头开始使用 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
微信扫一扫