繼續(xù)旅程：從頭開始使用 AngularJS 和 Firebase 構(gòu)建 Web 應(yīng)用程序：第 2 部分

在本系列的第一部分中，我們了解了如何開始使用 angularJS 和 firebase 創(chuàng)建應(yīng)用程序。我們創(chuàng)建了登錄頁面，并使用 firebase 作為后端實現(xiàn)了登錄功能。

在本教程中，我們將把本系列提升到一個新的水平。我們將創(chuàng)建并設(shè)置注冊頁面，并了解如何在 AngularJS 中進行表單驗證。

開始使用

讓我們首先從 github 克隆本教程的第一部分。

git clone https://github.com/jay3dec/AngularJS_Firebase_Part1.git 

獲取代碼后，導(dǎo)航到項目目錄并安裝所需的依賴項。

cd AngularJS_Firebase_Part1 npm install 

安裝所有依賴項后，啟動服務(wù)器。

npm start 

將瀏覽器指向 http://localhost:8000/app/#/home，應(yīng)用程序應(yīng)該正在運行。

創(chuàng)建注冊屏幕

我們將首先創(chuàng)建一個頁面供訪客用戶注冊。導(dǎo)航到 AngularJS_Firebase_Part1/app 并創(chuàng)建一個名為 register 的文件夾。在 register 文件夾中，創(chuàng)建 register.html 和 register.js 文件。以下是 register.html 的外觀：

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><link rel="icon" href="http://getbootstrap.com/favicon.ico"><title>AngularJS &amp; 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"><div class="container">         <div class="jumbotron" style="padding-bottom:0px;">             <h2>AngularJS &amp; 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&gt;         </a></label>         <button type="button" class="btn btn-lg btn-primary btn-block">Register</button>       </form>      </div>   

如上面的 HTML 代碼所示，我們使用 Bootstrap 進行 HTML 設(shè)計。

在 register.js 中，我們將聲明應(yīng)用程序訪問注冊視圖的路由。 $routeProvider 有一個名為 when 的方法，我們將使用該方法為注冊視圖創(chuàng)建路由。定義新路由時，我們將設(shè)置一個 templateUrl ，它將在 index.html 中呈現(xiàn)。除此之外，我們還將為注冊視圖中新創(chuàng)建的 $scope 設(shè)置一個 控制器。控制器是控制特定視圖的邏輯。它應(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 模板文件中包含 register.js。打開 index.html 并包含以下內(nèi)容：

<script src="register/register.js"></script>

重新啟動服務(wù)器并將瀏覽器指向http://localhost:8000/app/index.html#/register，您應(yīng)該會看到注冊屏幕：

接下來，讓我們將注冊屏幕鏈接到登錄屏幕。在home.html和register.html中分別有一個sign up和sign in href。我們將設(shè)置兩個 href 源，以便可以從兩個頁面訪問它們。

在 home.html 中：

<a href="#/register"> Sign Up</a><a></a> 

在 register.html 中：

<a href="#/home"> Sign In</a><a></a> 

AngularJS 中的表單驗證

當(dāng)用戶在注冊屏幕上輸入其電子郵件地址和密碼時，我們需要驗證一些內(nèi)容。首先，輸入的電子郵件 ID 應(yīng)該具有有效的電子郵件 ID 格式，其次，輸入的密碼應(yīng)該具有最小長度。

AngularJS 提供了 FormController，它可以跟蹤表單內(nèi)的每個元素。來自 AngularJS 文檔：

FormController 跟蹤其所有控件和嵌套表單以及它們的狀態(tài)，例如有效/無效或臟/原始。

FormController 有一些屬性，例如 $pristine, $dirty, $invalid, $valid 等。我們將了解這些屬性是什么，并且我們將使用其中一些屬性來為我們的注冊頁面實現(xiàn)表單驗證。

首先，我們需要修改表單 HTML 以添加驗證消息。在 register.html 中修改表單 HTML，如圖所示。

保存更改，重新啟動服務(wù)器，然后刷新 register 頁面。您應(yīng)該看到如下頁面：

現(xiàn)在，正如我們在上面的屏幕中看到的，驗證消息是可見的。僅當(dāng)電子郵件和密碼無效時，我們才需要顯示它們。

AngularJS 提供了一個名為 ngShow 的指令來根據(jù)特定的表達式顯示 HTML。 （AngularJS 指令是 AngularJS 提供的擴展 HTML 屬性，用于增強元素的功能。）因此，當(dāng)輸入電子郵件包含無效數(shù)據(jù)時，我們將使用 ngShow 顯示驗證消息。但我們?nèi)绾沃垒斎氲碾娮余]件是否無效呢？好吧，請記住我們之前討論過的 FormController 屬性。 FormController 有一個名為 $invalid 的屬性，如果控件無效，則該屬性為 True。如果輸入的電子郵件無效，則 regForm.email.$invalid 將為 true。因此，我們將使用 $invalid 和 ngShow 來顯示驗證消息。修改電子郵件消息范圍，如下所示：

<p ng-show="regForm.email.$invalid">Enter a valid email.</p> 

保存更改，重新啟動服務(wù)器，然后瀏覽到注冊頁面。您會看到電子郵件 ID 的驗證消息不再顯示。現(xiàn)在，嘗試在輸入電子郵件中輸入一些數(shù)據(jù)，將會彈出錯誤消息。嘗試輸入有效的電子郵件地址，驗證消息將會消失。但最初仍然顯示密碼最小長度的消息。讓我們修復(fù)它。

AngularJS 提供了另一個名為 ng-minlength 的指令來設(shè)置任何輸入控件的最小長度。我們將使用它來設(shè)置密碼字段的最小長度，然后使用 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> 

因此，如果密碼字段的最小長度不符合密碼輸入字段中設(shè)置的最小長度，則 regForm.password.$error.minlength 將設(shè)置為“true”并且將會顯示驗證消息。

保存所有更改，重新啟動服務(wù)器，然后瀏覽至注冊頁面。嘗試輸入密碼值，驗證消息將顯示，直到密碼長度為 8。

現(xiàn)在，為了突出顯示無效的輸入元素，我們可以使用一些樣式。使用名為 ngClass 的 AngularJS 指令，我們可以使用 $invalid 屬性動態(tài)突出顯示錯誤的輸入元素。因此，將 ngClass 指令添加到電子郵件和密碼元素的父 div 中。

     Email     
Enter a valid email.
 
  
     Password     <input type="password" name="password" class="form-control" ng-model="user.password" ng-minlength="8">
Min password length is 8 characters.
 
 

保存更改，重新啟動服務(wù)器，然后嘗試瀏覽到注冊頁面。現(xiàn)在，對于無效條目，驗證消息將顯示如下：

現(xiàn)在，正如您在上面的屏幕中看到的，在驗證錯誤時， Register 按鈕是已啟用。除非輸入的電子郵件和密碼有效，否則我們將其禁用。 AngularJS 提供了一個名為 ngDisabled 的指令，它有助于根據(jù)表達式禁用元素。如果 email 和 password 已驗證，則將設(shè)置 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，這將是僅當(dāng)數(shù)據(jù)無效時才出現(xiàn)這種情況。

保存所有更改，重新啟動服務(wù)器，并刷新注冊頁面。您會注意到，“注冊”按鈕已被禁用，并且在輸入有效的電子郵件地址和密碼之前將一直保持禁用狀態(tài)。

驗證登錄屏幕

在登錄屏幕上實施驗證的方式與我們在注冊屏幕上實施的方式非常相似。我建議您自己對登錄屏幕實施驗證作為練習(xí)。如果您遇到困難，請查看 登錄 表單的修改后的 HTML 代碼（位于 home.html 中，如下所示：

）

總結(jié)

在本教程的這一部分中，我們創(chuàng)建了注冊頁面并為其設(shè)置了路由。我們還了解了如何使用 AngularJS 為注冊頁面實現(xiàn)驗證。

在下一部分中，我們將重點關(guān)注實現(xiàn)注冊功能和一些其他功能。上述教程的源代碼可在 GitHub 上獲取。

請在下面的評論中告訴我們您的想法！