In the first part of this series, we learned how to get started creating applications using AngularJS and Firebase. We created the login page and implemented the login functionality using Firebase as the backend.
In this tutorial we will take this series to the next level. We will create and set up a registration page and learn how to do form validation in AngularJS.
start using
Let’s start by cloning the first part of this tutorial from GitHub.
git clone https://github.com/jay3dec/AngularJS_Firebase_Part1.git
After getting the code, navigate to the project directory and install the required dependencies.
cd AngularJS_Firebase_Part1
npm install
After installing all dependencies, start the server.
npm start
Point your browser to http://localhost:8000/app/#/home and the application should be running.
Create registration screen
We will first create a page for guest users to register. Navigate to AngularJS_Firebase_Part1/app and create a folder called register. In the register folder, create the register.html and register.js files. Here's what register.html looks like:
<!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>
As shown in the HTML code above, we use Bootstrap for HTML design.
In register.js we will declare the route for the application to access the registered view. $routeProvider has a method called when which we will use to create a route for the registered view. When defining a new route, we will set a templateUrl which will be rendered in index.html. In addition to this, we will also set up a controller for the newly created $scope in the registered view. A controller is the logic that controls a specific view. It should look like this:
'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() {
}]);
Now open app.js and add the registration module myApp.register to the application.
'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'
});
}]);
To display the registration page, we need to include register.js in the main HTML template file of the application. Open index.html and include the following:
<script src="register/register.js"></script>
Restart the server and point your browser to http://localhost:8000/app/index.html#/register, you should see the registration screen:
Next, let’s link the registration screen to the login screen. There is a sign up and sign in href in home.html and register.html respectively. We will set up two href sources so that they can be accessed from both pages.
In home.html:
<a href="#/register"> Sign Up<a/>
In register.html:
<a href="#/home"> Sign In<a/>
When a user enters their email address and password on the registration screen, we need to verify something. Firstly, the email ID entered should be in a valid email ID format and secondly, the password entered should be of minimum length.
AngularJS provides FormController, which can track each element within the form. From the AngularJS documentation:
FormController keeps track of all its controls and nested forms and their status, such as valid/invalid or dirty/original.
FormController has some properties, such as $pristine, $dirty, $invalid, $valid wait. We'll see what these properties are, and we'll use some of them to implement form validation for our registration page.
First, we need to modify the form HTML to add the validation message. Modify the form HTML in register.html as shown in the figure.
<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>
Save the changes, restart the server, and refresh the register page. You should see a page like this:
Now, as we can see in the above screen, the verification message is visible. We only need to display the email and password if they are invalid.
AngularJS 提供了一個(gè)名為 ngShow 的指令來根據(jù)特定的表達(dá)式顯示 HTML。 （AngularJS 指令是 AngularJS 提供的擴(kuò)展 HTML 屬性，用于增強(qiáng)元素的功能。）因此，當(dāng)輸入電子郵件包含無效數(shù)據(jù)時(shí)，我們將使用 ngShow 顯示驗(yàn)證消息。但我們?nèi)绾沃垒斎氲碾娮余]件是否無效呢？好吧，請(qǐng)記住我們之前討論過的 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ù)器，然后瀏覽到注冊(cè)頁面。您會(huì)看到電子郵件 ID 的驗(yàn)證消息不再顯示。現(xiàn)在，嘗試在輸入電子郵件中輸入一些數(shù)據(jù)，將會(huì)彈出錯(cuò)誤消息。嘗試輸入有效的電子郵件地址，驗(yàn)證消息將會(huì)消失。但最初仍然顯示密碼最小長(zhǎng)度的消息。讓我們修復(fù)它。
AngularJS 提供了另一個(gè)名為 ng-minlength 的指令來設(shè)置任何輸入控件的最小長(zhǎng)度。我們將使用它來設(shè)置密碼字段的最小長(zhǎng)度，然后使用 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>
因此，如果密碼字段的最小長(zhǎng)度不符合密碼輸入字段中設(shè)置的最小長(zhǎng)度，則 regForm.password.$error.minlength 將設(shè)置為“true”并且將會(huì)顯示驗(yàn)證消息。
保存所有更改，重新啟動(dòng)服務(wù)器，然后瀏覽至注冊(cè)頁面。嘗試輸入密碼值，驗(yàn)證消息將顯示，直到密碼長(zhǎng)度為 8。
現(xiàn)在，為了突出顯示無效的輸入元素，我們可以使用一些樣式。使用名為 ngClass 的 AngularJS 指令，我們可以使用 $invalid 屬性動(dòng)態(tài)突出顯示錯(cuò)誤的輸入元素。因此，將 ngClass 指令添加到電子郵件和密碼元素的父 div 中。
保存更改，重新啟動(dòng)服務(wù)器，然后嘗試瀏覽到注冊(cè)頁面。現(xiàn)在，對(duì)于無效條目，驗(yàn)證消息將顯示如下：
現(xiàn)在，正如您在上面的屏幕中看到的，在驗(yàn)證錯(cuò)誤時(shí)， Register 按鈕是已啟用。除非輸入的電子郵件和密碼有效，否則我們將其禁用。 AngularJS 提供了一個(gè)名為 ngDisabled 的指令，它有助于根據(jù)表達(dá)式禁用元素。如果 email 和 password 已驗(yàn)證，則將設(shè)置 user.email 和 user.password 模型。因此，我們將使用這兩個(gè)對(duì)象通過 ngDisabled 來啟用/禁用注冊(cè)按鈕。修改注冊(cè)按鈕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ù)器，并刷新注冊(cè)頁面。您會(huì)注意到，“注冊(cè)”按鈕已被禁用，并且在輸入有效的電子郵件地址和密碼之前將一直保持禁用狀態(tài)。
驗(yàn)證登錄屏幕
在登錄屏幕上實(shí)施驗(yàn)證的方式與我們?cè)谧?cè)屏幕上實(shí)施的方式非常相似。我建議您自己對(duì)登錄屏幕實(shí)施驗(yàn)證作為練習(xí)。如果您遇到困難，請(qǐng)查看 登錄 表單的修改后的 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)建了注冊(cè)頁面并為其設(shè)置了路由。我們還了解了如何使用 AngularJS 為注冊(cè)頁面實(shí)現(xiàn)驗(yàn)證。
在下一部分中，我們將重點(diǎn)關(guān)注實(shí)現(xiàn)注冊(cè)功能和一些其他功能。上述教程的源代碼可在 GitHub 上獲取。
請(qǐng)?jiān)谙旅娴脑u(píng)論中告訴我們您的想法！
The above is the detailed content of Continuing the journey: Building a web app from scratch with AngularJS and Firebase: Part 2. For more information, please follow other related articles on the PHP Chinese website!