在本系列的第一部分中，我們了解如何開始使用 AngularJS 和 Firebase 建立應(yīng)用程式。我們建立了登入頁面，並使用 Firebase 作為後端實(shí)現(xiàn)了登入功能。
在本教程中，我們將把本系列提升到一個(gè)新的水平。我們將建立並設(shè)定註冊頁面，並了解如何在 AngularJS 中進(jìn)行表單驗(yàn)證。
開始使用
讓我們先從 GitHub 複製本教學(xué)的第一部分。
git clone https://github.com/jay3dec/AngularJS_Firebase_Part1.git
取得程式碼後，導(dǎo)覽至專案目錄並安裝所需的依賴項(xiàng)。
cd AngularJS_Firebase_Part1
npm install
安裝所有依賴項(xiàng)後，啟動(dòng)伺服器。
npm start
將瀏覽器指向 http://localhost:8000/app/#/home，應(yīng)用程式應(yīng)該正在執(zhí)行。
建立註冊畫面
我們會(huì)先建立一個(gè)頁面供訪客使用者註冊。導(dǎo)航至 AngularJS_Firebase_Part1/app 並建立一個(gè)名為 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 進(jìn)行 HTML 設(shè)計(jì)。
在 register.js 中，我們將聲明應(yīng)用程式存取註冊視圖的路由。 $routeProvider 有一個(gè)名為 when 的方法，我們將使用該方法為註冊視圖建立路由。定義新路由時(shí)，我們將設(shè)定一個(gè) templateUrl ，它將在 index.html 中呈現(xiàn)。除此之外，我們還將為註冊視圖中新建立的 $scope 設(shè)定一個(gè) 控制器?？刂破魇强刂铺囟ㄒ晥D的邏輯。它應(yīng)該是這樣的：
'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() {
}]);
現(xiàn)在開啟 app.js 並將註冊模組 myApp.register 加入到應(yīng)用程式中。
'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'
});
}]);
要顯示註冊頁面，我們需要在應(yīng)用程式的主 HTML 範(fàn)本檔案中包含 register.js。開啟 index.html 並包含以下內(nèi)容：
<script src="register/register.js"></script>
重新啟動(dòng)伺服器並將瀏覽器指向http://localhost:8000/app/index.html#/register，您應(yīng)該會(huì)看到註冊畫面：
接下來，讓我們將註冊畫面連結(jié)到登入畫面。在home.html和register.html中分別有一個(gè)sign up和sign in href。我們將設(shè)定兩個(gè) href 來源，以便可以從兩個(gè)頁面存取它們。
在 home.html 中：
<a href="#/register"> Sign Up<a/>
在 register.html 中：
<a href="#/home"> Sign In<a/>
AngularJS 中的表單驗(yàn)證
當(dāng)使用者在註冊畫面上輸入其電子郵件地址和密碼時(shí)，我們需要驗(yàn)證一些內(nèi)容。首先，輸入的電子郵件 ID 應(yīng)該具有有效的電子郵件 ID 格式，其次，輸入的密碼應(yīng)該具有最小長度。
AngularJS 提供了 FormController，它可以追蹤表單內(nèi)的每個(gè)元素。來自 AngularJS 文檔：
FormController 追蹤其所有控制項(xiàng)和嵌套表單以及它們的狀態(tài)，例如有效/無效或髒/原始。
FormController 有一些屬性，例如$pristine, $dirty, $invalid, $valid等。我們將了解這些屬性是什麼，並且我們將使用其中一些屬性來為我們的註冊頁面實(shí)現(xiàn)表單驗(yàn)證。
首先，我們需要修改表單 HTML 以新增驗(yàn)證訊息。在 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>
儲(chǔ)存更改，重新啟動(dòng)伺服器，然後重新整理 register 頁面。您應(yīng)該看到如下頁面：
現(xiàn)在，正如我們在上面的畫面中所看到的，驗(yàn)證訊息是可見的。只有當(dāng)電子郵件和密碼無效時(shí)，我們才需要顯示它們。
AngularJS 提供了一個(gè)名為 ngShow 的指令來根據(jù)特定的表達(dá)式顯示 HTML。 （AngularJS 指令是 AngularJS 提供的擴(kuò)展 HTML 屬性，用于增強(qiáng)元素的功能。）因此，當(dāng)輸入電子郵件包含無效數(shù)據(jù)時(shí)，我們將使用 ngShow 顯示驗(yàn)證消息。但我們?nèi)绾沃垒斎氲碾娮余]件是否無效呢？好吧，請記住我們之前討論過的 FormController 屬性。 FormController 有一個(gè)名為 $invalid 的屬性，如果控件無效，則該屬性為 True。如果輸入的電子郵件無效，則 regForm.email.$invalid 將為 true。因此，我們將使用 $invalid 和 ngShow 來顯示驗(yàn)證消息。修改電子郵件消息范圍，如下所示：
<p ng-show="regForm.email.$invalid">Enter a valid email.</p>
保存更改，重新啟動(dòng)服務(wù)器，然后瀏覽到注冊頁面。您會(huì)看到電子郵件 ID 的驗(yàn)證消息不再顯示?，F(xiàn)在，嘗試在輸入電子郵件中輸入一些數(shù)據(jù)，將會(huì)彈出錯(cuò)誤消息。嘗試輸入有效的電子郵件地址，驗(yàn)證消息將會(huì)消失。但最初仍然顯示密碼最小長度的消息。讓我們修復(fù)它。
AngularJS 提供了另一個(gè)名為 ng-minlength 的指令來設(shè)置任何輸入控件的最小長度。我們將使用它來設(shè)置密碼字段的最小長度，然后使用 ngShow 來顯示/隱藏驗(yàn)證消息。修改密碼字段以包含 ng-minlength 指令，如下所示：
<input type="password" name="password" class="form-control" ng-model="user.password" ng-minlength="8">
接下來修改密碼字段的驗(yàn)證消息范圍，如下所示：
<p ng-show="regForm.password.$error.minlength">Min password length is 8 characters.</p>
因此，如果密碼字段的最小長度不符合密碼輸入字段中設(shè)置的最小長度，則 regForm.password.$error.minlength 將設(shè)置為“true”并且將會(huì)顯示驗(yàn)證消息。
保存所有更改，重新啟動(dòng)服務(wù)器，然后瀏覽至注冊頁面。嘗試輸入密碼值，驗(yàn)證消息將顯示，直到密碼長度為 8。
現(xiàn)在，為了突出顯示無效的輸入元素，我們可以使用一些樣式。使用名為 ngClass 的 AngularJS 指令，我們可以使用 $invalid 屬性動(dòng)態(tài)突出顯示錯(cuò)誤的輸入元素。因此，將 ngClass 指令添加到電子郵件和密碼元素的父 div 中。
保存更改，重新啟動(dòng)服務(wù)器，然后嘗試瀏覽到注冊頁面?，F(xiàn)在，對于無效條目，驗(yàn)證消息將顯示如下：
現(xiàn)在，正如您在上面的屏幕中看到的，在驗(yàn)證錯(cuò)誤時(shí)， Register 按鈕是已啟用。除非輸入的電子郵件和密碼有效，否則我們將其禁用。 AngularJS 提供了一個(gè)名為 ngDisabled 的指令，它有助于根據(jù)表達(dá)式禁用元素。如果 email 和 password 已驗(yàn)證，則將設(shè)置 user.email 和 user.password 模型。因此，我們將使用這兩個(gè)對象通過 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，這將是僅當(dāng)數(shù)據(jù)無效時(shí)才出現(xiàn)這種情況。
保存所有更改，重新啟動(dòng)服務(wù)器，并刷新注冊頁面。您會(huì)注意到，“注冊”按鈕已被禁用，并且在輸入有效的電子郵件地址和密碼之前將一直保持禁用狀態(tài)。
驗(yàn)證登錄屏幕
在登錄屏幕上實(shí)施驗(yàn)證的方式與我們在注冊屏幕上實(shí)施的方式非常相似。我建議您自己對登錄屏幕實(shí)施驗(yàn)證作為練習(xí)。如果您遇到困難，請查看 登錄 表單的修改后的 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>
總結(jié)
在本教程的這一部分中，我們創(chuàng)建了注冊頁面并為其設(shè)置了路由。我們還了解了如何使用 AngularJS 為注冊頁面實(shí)現(xiàn)驗(yàn)證。
在下一部分中，我們將重點(diǎn)關(guān)注實(shí)現(xiàn)注冊功能和一些其他功能。上述教程的源代碼可在 GitHub 上獲取。
請?jiān)谙旅娴脑u論中告訴我們您的想法！
以上是繼續(xù)旅程：從頭開始使用 AngularJS 和 Firebase 建立 Web 應(yīng)用程式：第 2 部分的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！