繼續旅程：從頭開始使用 AngularJS 和 Firebase 建立 Web 應用程式：第 2 部分
在本系列的第一部分中，我們了解如何開始使用 AngularJS 和 Firebase 建立應用程式。我們建立了登入頁面，並使用 Firebase 作為後端實現了登入功能。
在本教程中，我們將把本系列提升到一個新的水平。我們將建立並設定註冊頁面，並了解如何在 AngularJS 中進行表單驗證。
開始使用
讓我們先從 GitHub 複製本教學的第一部分。
git clone https://github.com/jay3dec/AngularJS_Firebase_Part1.git
取得程式碼後，導覽至專案目錄並安裝所需的依賴項。
cd AngularJS_Firebase_Part1 npm install
安裝所有依賴項後，啟動伺服器。
npm start
將瀏覽器指向 http://localhost:8000/app/#/home，應用程式應該正在執行。
建立註冊畫面
我們會先建立一個頁面供訪客使用者註冊。導航至 AngularJS_Firebase_Part1/app 並建立一個名為 register 的資料夾。在 register 資料夾中，建立 register.html 和 register.js 檔案。以下是 register.html 的外觀：
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="icon" href="http://getbootstrap.com/favicon.ico">
<title>AngularJS & Firebase Web App</title>
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="http://getbootstrap.com/examples/signin/signin.css" rel="stylesheet">
<link href="justified-nav.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="jumbotron" style="padding-bottom:0px;">
<h2>AngularJS & Firebase App!</h2>
</div>
<form class="form-signin" role="form">
<input type="email" class="form-control" placeholder="Email address" required="" autofocus="">
<input type="password" class="form-control" placeholder="Password" required="">
<label class="checkbox">
<a href="#"> Sign In</>
</label>
<button type="button" class="btn btn-lg btn-primary btn-block">Register</button>
</form>
</div>
</body></html>
如上面的 HTML 程式碼所示，我們使用 Bootstrap 進行 HTML 設計。
在 register.js 中，我們將聲明應用程式存取註冊視圖的路由。 $routeProvider 有一個名為 when 的方法，我們將使用該方法為註冊視圖建立路由。定義新路由時，我們將設定一個 templateUrl ，它將在 index.html 中呈現。除此之外，我們還將為註冊視圖中新建立的 $scope 設定一個 控制器。控制器是控制特定視圖的邏輯。它應該是這樣的：
'use strict';
angular.module('myApp.register', ['ngRoute'])
// Declared route
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/register', {
templateUrl: 'register/register.html',
controller: 'RegisterCtrl'
});
}])
// Register controller
.controller('RegisterCtrl', [function() {
}]);
現在開啟 app.js 並將註冊模組 myApp.register 加入到應用程式中。
'use strict';
angular.module('myApp', [
'ngRoute',
'myApp.home',
'myApp.register' // Newly added register route
]).
config(['$routeProvider', function($routeProvider) {
// Set defualt view of our app to home
$routeProvider.otherwise({
redirectTo: '/home'
});
}]);
要顯示註冊頁面，我們需要在應用程式的主 HTML 範本檔案中包含 register.js。開啟 index.html 並包含以下內容：
<script src="register/register.js"></script>
重新啟動伺服器並將瀏覽器指向http://localhost:8000/app/index.html#/register，您應該會看到註冊畫面：
接下來，讓我們將註冊畫面連結到登入畫面。在home.html和register.html中分別有一個sign up和sign in href。我們將設定兩個 href 來源，以便可以從兩個頁面存取它們。
在 home.html 中：
<a href="#/register"> Sign Up<a/>
在 register.html 中：
<a href="#/home"> Sign In<a/>
AngularJS 中的表單驗證
當使用者在註冊畫面上輸入其電子郵件地址和密碼時，我們需要驗證一些內容。首先，輸入的電子郵件 ID 應該具有有效的電子郵件 ID 格式，其次，輸入的密碼應該具有最小長度。
AngularJS 提供了 FormController，它可以追蹤表單內的每個元素。來自 AngularJS 文檔：
FormController 追蹤其所有控制項和嵌套表單以及它們的狀態，例如有效/無效或髒/原始。
FormController 有一些屬性，例如$pristine, $dirty, $invalid, $valid等。我們將了解這些屬性是什麼，並且我們將使用其中一些屬性來為我們的註冊頁面實現表單驗證。
首先，我們需要修改表單 HTML 以新增驗證訊息。在 register.html 中修改表單 HTML，如圖所示。
<form class="form-signin" name="regForm">
<div class="form-group">
<label>Email</label>
<input type="email" name="email" class="form-control" ng-model="user.email">
<p>Enter a valid email.</p>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="password" class="form-control" ng-model="user.password">
<p>Min password length is 8 characters.</p>
</div>
<button type="button" class="btn btn-lg btn-primary btn-block">Register</button>
</form>
儲存更改，重新啟動伺服器，然後重新整理 register 頁面。您應該看到如下頁面：
現在，正如我們在上面的畫面中所看到的，驗證訊息是可見的。只有當電子郵件和密碼無效時，我們才需要顯示它們。
AngularJS 提供了一个名为 ngShow 的指令来根据特定的表达式显示 HTML。 （AngularJS 指令是 AngularJS 提供的扩展 HTML 属性，用于增强元素的功能。）因此，当输入电子邮件包含无效数据时，我们将使用 ngShow 显示验证消息。但我们如何知道输入的电子邮件是否无效呢？好吧，请记住我们之前讨论过的 FormController 属性。 FormController 有一个名为 $invalid 的属性，如果控件无效，则该属性为 True。如果输入的电子邮件无效，则 regForm.email.$invalid 将为 true。因此，我们将使用 $invalid 和 ngShow 来显示验证消息。修改电子邮件消息范围，如下所示：
<p ng-show="regForm.email.$invalid">Enter a valid email.</p>
保存更改，重新启动服务器，然后浏览到注册页面。您会看到电子邮件 ID 的验证消息不再显示。现在，尝试在输入电子邮件中输入一些数据，将会弹出错误消息。尝试输入有效的电子邮件地址，验证消息将会消失。但最初仍然显示密码最小长度的消息。让我们修复它。
AngularJS 提供了另一个名为 ng-minlength 的指令来设置任何输入控件的最小长度。我们将使用它来设置密码字段的最小长度，然后使用 ngShow 来显示/隐藏验证消息。修改密码字段以包含 ng-minlength 指令，如下所示：
<input type="password" name="password" class="form-control" ng-model="user.password" ng-minlength="8">
接下来修改密码字段的验证消息范围，如下所示：
<p ng-show="regForm.password.$error.minlength">Min password length is 8 characters.</p>
因此，如果密码字段的最小长度不符合密码输入字段中设置的最小长度，则 regForm.password.$error.minlength 将设置为“true”并且将会显示验证消息。
保存所有更改，重新启动服务器，然后浏览至注册页面。尝试输入密码值，验证消息将显示，直到密码长度为 8。
现在，为了突出显示无效的输入元素，我们可以使用一些样式。使用名为 ngClass 的 AngularJS 指令，我们可以使用 $invalid 属性动态突出显示错误的输入元素。因此，将 ngClass 指令添加到电子邮件和密码元素的父 div 中。
Enter a valid email.
<input type="password" name="password" class="form-control" ng-model="user.password" ng-minlength="8">Min password length is 8 characters.
保存更改，重新启动服务器，然后尝试浏览到注册页面。现在，对于无效条目，验证消息将显示如下：
现在，正如您在上面的屏幕中看到的，在验证错误时， Register 按钮是已启用。除非输入的电子邮件和密码有效，否则我们将其禁用。 AngularJS 提供了一个名为 ngDisabled 的指令，它有助于根据表达式禁用元素。如果 email 和 password 已验证，则将设置 user.email 和 user.password 模型。因此，我们将使用这两个对象通过 ngDisabled 来启用/禁用注册按钮。修改注册按钮HTML，如图：
<button type="button" ng-disabled="!user.email || !user.password" class="btn btn-lg btn-primary btn-block">Register</button>
如您所见，如果 user.email 或 user.password 不为 false，则 ng-disabled 将为 true，这将是仅当数据无效时才出现这种情况。
保存所有更改，重新启动服务器，并刷新注册页面。您会注意到，“注册”按钮已被禁用，并且在输入有效的电子邮件地址和密码之前将一直保持禁用状态。
验证登录屏幕
在登录屏幕上实施验证的方式与我们在注册屏幕上实施的方式非常相似。我建议您自己对登录屏幕实施验证作为练习。如果您遇到困难，请查看 登录 表单的修改后的 HTML 代码（位于 home.html 中，如下所示：
<form class="form-signin" name="signinForm" role="form">
<div class="form-group" ng-class="{ 'has-error' : signinForm.email.$invalid }">
<label>Email</label>
<input type="email" name="email" class="form-control" ng-model="user.email">
<p class="help-block" ng-show="signinForm.email.$invalid">Enter a valid email.</p>
</div>
<div class="form-group" ng-class="{ 'has-error' : signinForm.password.$invalid }">
<label>Password</label>
<input type="password" name="password" class="form-control" ng-model="user.password" ng-minlength="3">
<p class="help-block" ng-show="signinForm.password.$error.minlength">Min password length is 8 characters.</p>
</div>
<label class="checkbox">
<a href="#/register"> Sign Up</a>
</label>
<button ng-disabled="!user.email || !user.password" type="button" ng-click="SignIn($event)" class="btn btn-lg btn-primary btn-block">SignIn</button>
</form>
总结
在本教程的这一部分中，我们创建了注册页面并为其设置了路由。我们还了解了如何使用 AngularJS 为注册页面实现验证。
在下一部分中，我们将重点关注实现注册功能和一些其他功能。上述教程的源代码可在 GitHub 上获取。
请在下面的评论中告诉我们您的想法！
以上是繼續旅程：從頭開始使用 AngularJS 和 Firebase 建立 Web 應用程式：第 2 部分的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
如何在 WordPress 中獲取登錄用戶信息以獲得個性化結果
Apr 19, 2025 pm 11:57 PM
最近，我們向您展示瞭如何通過允許用戶將自己喜歡的帖子保存在個性化庫中來為用戶創建個性化體驗。您可以通過在某些地方（即歡迎屏幕）使用他們的名字，將個性化結果提升到另一個水平。幸運的是，WordPress使獲取登錄用戶的信息變得非常容易。在本文中，我們將向您展示如何檢索與當前登錄用戶相關的信息。我們將利用get_currentuserinfo(); 功能。這可以在主題中的任何地方使用（頁眉、頁腳、側邊欄、頁面模板等）。為了使其工作，用戶必須登錄。因此我們需要使用
wordpress文章列表怎麼調
Apr 20, 2025 am 10:48 AM
有四種方法可以調整 WordPress 文章列表：使用主題選項、使用插件（如 Post Types Order、WP Post List、Boxy Stuff）、使用代碼（在 functions.php 文件中添加設置）或直接修改 WordPress 數據庫。
如何開始WordPress博客：初學者的分步指南
Apr 17, 2025 am 08:25 AM
博客是人們在網上表達觀點、意見和見解的理想平台。許多新手渴望建立自己的網站，卻因擔心技術障礙或成本問題而猶豫不決。然而，隨著平台不斷發展以滿足初學者的能力和需求，現在開始變得比以往任何時候都更容易。 本文將逐步指導您如何建立一個WordPress博客，從主題選擇到使用插件提升安全性和性能，助您輕鬆創建自己的網站。 選擇博客主題和方向 在購買域名或註冊主機之前，最好先確定您計劃涵蓋的主題。個人網站可以圍繞旅行、烹飪、產品評論、音樂或任何激發您興趣的愛好展開。專注於您真正感興趣的領域可以鼓勵持續寫作
如何在父分類的存檔頁面上顯示子分類
Apr 19, 2025 pm 11:54 PM
您想了解如何在父分類存檔頁面上顯示子分類嗎？在自定義分類存檔頁面時，您可能需要執行此操作，以使其對訪問者更有用。在本文中，我們將向您展示如何在父分類存檔頁面上輕鬆顯示子分類。為什麼在父分類存檔頁面上顯示子分類？通過在父分類存檔頁面上顯示所有子分類，您可以使其不那麼通用，對訪問者更有用。例如，如果您運行一個關於書籍的WordPress博客，並且有一個名為“主題”的分類法，那麼您可以添加“小說”、“非小說”等子分類法，以便您的讀者可以
如何在 WordPress 中按帖子過期日期對帖子進行排序
Apr 19, 2025 pm 11:48 PM
過去，我們分享過如何使用PostExpirator插件使WordPress中的帖子過期。好吧，在創建活動列表網站時，我們發現這個插件非常有用。我們可以輕鬆刪除過期的活動列表。其次，多虧了這個插件，按帖子過期日期對帖子進行排序也非常容易。在本文中，我們將向您展示如何在WordPress中按帖子過期日期對帖子進行排序。更新了代碼以反映插件中更改自定義字段名稱的更改。感謝Tajim在評論中讓我們知道。在我們的特定項目中，我們將事件作為自定義帖子類型。現在
wordpress主機怎麼建站
Apr 20, 2025 am 11:12 AM
要使用 WordPress 主機建站，需要：選擇一個可靠的主機提供商。購買一個域名。設置 WordPress 主機帳戶。選擇一個主題。添加頁面和文章。安裝插件。自定義您的網站。發布您的網站。
如何使用 IFTTT 自動化 WordPress 和社交媒體（及更多）
Apr 18, 2025 am 11:27 AM
您是否正在尋找自動化 WordPress 網站和社交媒體帳戶的方法？ 通過自動化，您將能夠在 Facebook、Twitter、LinkedIn、Instagram 等平台上自動分享您的 WordPress 博客文章或更新。 在本文中，我們將向您展示如何使用 IFTTT、Zapier 和 Uncanny Automator 輕鬆實現 WordPress 和社交媒體的自動化。 為什麼要自動化 WordPress 和社交媒體？ 自動化您的WordPre
如何在 WordPress 中顯示查詢數量和頁面加載時間
Apr 19, 2025 pm 11:51 PM
我們的一位用戶詢問其他網站如何在頁腳中顯示查詢數量和頁面加載時間。您經常會在網站的頁腳中看到這一點，它可能會顯示類似以下內容：“1.248秒內64個查詢”。在本文中，我們將向您展示如何在WordPress中顯示查詢數量和頁面加載時間。只需將以下代碼粘貼到主題文件中您喜歡的任何位置（例如footer.php）。 queriesin
