继续旅程:使用AngularJS和Firebase从头构建Web应用程序:第2部分。

在本系列的第一部分中，我们学习了如何开始使用angularjs和firebase创建应用程序。我们创建了登录页面，并使用firebase作为后端来实现登录功能。

在本教程中，我们将把这个系列提升到一个新的水平。我们将创建和设置一个注册页面，并学习如何在AngularJS中验证表单。

开始让我们首先从GitHub复制本教程的第一部分。

git clone https://github.com/jay3dec/AngularJS_Firebase_Part1.git获得代码，导航到项目目录并安装所需的依赖项。

CD Angular JS _ Firebase _ Part1NPM安装安装完所有依赖项后，启动服务器。

Npm start将浏览器指向http://localhost:8000/app/#/home，应用程序应该正在运行。

创建注册屏幕我们将首先创建一个页面供来宾用户注册。导航到AngularJS_Firebase_Part1/app并创建一个名为register的文件夹。在注册文件夹中，创建register.js和register.js文件。以下是register.html的外观:

& lt！DOCTYPE html & gt& lthtml lang = & quoten & quot& gt& lthead & gt& ltmeta http-equiv = & quot；内容类型& quotcontent = & quot文本/html；字符集= UTF-8 & quot；& gt& ltlink rel = & quot图标& quothref = & quothttp://getbootstrap.com/favicon.ico" & gt；& lttitle & gt安格鲁& ampFirebase Web应用程序& lt/title & gt；& ltlink href = & quothttp://getbootstrap.com/dist/css/bootstrap.min.css" rel = & quot；样式表& quot& gt& ltlink href = & quothttp://getbootstrap.com/examples/signin/signin.css" rel = & quot；样式表& quot& gt& ltlink href = & quot两端对齐-nav . CSS & quot；rel = & quot样式表& quot& gt& lt/head & gt；& ltbody & gt& ltdiv class = & quot容器&quot& gt& ltdiv class = & quot大屏幕& quotstyle = & quot填充-底部:0px"& gt& lth2 & gt安格鲁& ampFirebase App！& lt/H2 & gt；& lt/div & gt；& ltform class = & quot表单登录role = & quot表单& quot& gt& lt输入类型= & quot电子邮件&quotclass = & quot表单控件& quotplaceholder = & quot电子邮件地址&quot必需的= & quot"自动对焦= & quot"& gt& lt输入类型= & quot密码& quotclass = & quot表单控件& quotplaceholder = & quot密码& quot必需的= & quot"& gt& ltlabel class = & quot复选框& quot& gt& lta href = & quot# & quot& gt登录& lt/& gt；& lt/label & gt；& lt按钮类型= & quot按钮& quotclass = & quotBTN BTN-LG BTN-主BTN-block & quot；& gt注册& lt/button & gt；& lt/form & gt；& lt/div & gt；& lt/body & gt；& lt/html & gt；如上面的HTML代码所示，我们使用Bootstrap进行HTML设计。

在register.js中，我们将声明应用程序访问注册视图的路由。$routeProvider有一个名为when的方法，我们将使用该方法为注册的视图创建一个路由。定义新路线时，我们将设置一个模板Url，它将在index.html中呈现。此外，我们将在注册视图中为新创建的$scope设置一个控制器。控制器是控制特定视图的逻辑。它应该是这样的:

使用严格的'；angular . module（myapp . register），

接下来，让我们将注册屏幕链接到登录屏幕。在home.html和register.html分别有一个注册和一个注册。我们将设置两个href源，以便可以从两个页面访问它们。

在home.html中:

& lta href = & quot#/注册& quot& gt注册& lta/》；在register.html中:

& lta href = & quot#/home & quot；& gt登录& lta/》；AngularJS中的表单验证当用户在注册屏幕上输入他们的电子邮件地址和密码时，我们需要验证一些东西。首先，输入的电子邮件id应该具有有效的电子邮件ID格式，其次，输入的密码应该具有最小长度。

AngularJS提供了FormController，可以跟踪表单中的每个元素。来自AngularJS文档:

FormController跟踪其所有控件和嵌套表单及其状态，如有效/无效或脏/原始。

FormController有一些属性，如$ pristine、$ dirty、$ invalid、$ valid等。我们将了解这些属性是什么，并将使用其中一些属性来实现注册页面的表单验证。

首先，我们需要修改表单HTML以添加验证消息。在register.html中修改表单HTML，如图所示。

& ltform class = & quot表单登录name = & quotregForm & quot& gt& ltdiv class = & quot表单组& quot& gt& lt标签& gt电子邮件& lt/label & gt；& lt输入类型= & quot电子邮件&quotname = & quot电子邮件&quotclass = & quot表单控件& quotng模型= & quot用户电子邮件& quot& gt& ltp & gt请输入有效的电子邮件。& lt/p & gt；& lt/div & gt；& ltdiv class = & quot表单组& quot& gt& lt标签& gt密码& lt/label & gt；& lt输入类型= & quot密码& quotname = & quot密码& quotclass = & quot表单控件& quotng模型= & quot用户密码& quot& gt& ltp & gt最小密码长度为8个字符。& lt/p & gt；& lt/div & gt；& lt按钮类型= & quot按钮& quotclass = & quotBTN BTN-LG BTN-主BTN-block & quot；& gt注册& lt/button & gt；& lt/form & gt；保存更改，重新启动服务器，然后刷新注册页面。您应该会看到以下页面:

现在，正如我们在上面的屏幕中看到的那样，验证消息是可见的。我们只需要在电子邮件和密码无效时显示它们。

AngularJS提供了一个名为ngShow的指令，用于根据特定的表达式显示HTML。（AngularJS指令是AngularJS提供的用于增强元素功能的扩展HTML属性。因此，当传入的电子邮件包含无效数据时，我们将使用ngShow来显示验证消息。但是我们如何知道输入的电子邮件是否无效呢？嗯，还记得我们之前讨论过的FormController属性吗？FormController有一个名为$invalid的属性，如果控件无效，则该属性为True。如果输入的电子邮件无效，regForm.email.$invalid将为真。因此，我们将使用$invalid和ngShow来显示验证消息。按如下方式修改电子邮件范围:

& ltp ng-show = & quot；regForm.email. $ invalid & quot& gt请输入有效的电子邮件。& lt/p & gt；保存更改，重新启动服务器，然后浏览到注册页面。您将看到不再显示电子邮件ID的验证消息。现在，如果您试图在输入电子邮件中输入一些数据，将会弹出一条错误消息。尝试输入有效的电子邮件地址，验证消息将会消失。但是最初仍会显示具有最小密码长度的消息。让我们修理它。

AngularJS提供了另一个名为ng-minlength的指令来设置任何输入控件的最小长度。我们将使用它来设置密码字段的最小长度，然后使用ngShow来显示/隐藏验证消息。修改密码字段以包括ng-minlength指令，如下所示:

& lt输入类型= & quot密码& quotname = & quot密码& quotclass = & quot表单控件& quotng模型= & quot用户密码& quotng-minlength = & quot；8 & quot& gt接下来，按如下方式修改密码字段的验证消息范围:

& ltp ng-show = & quot；regform . password . $ error . minlength & quot；& gt最小密码长度为8个字符。& lt/p & gt；因此，如果密码字段的最小长度与密码输入字段中设置的最小长度不匹配，regform . password . $ error . minlength将被设置为“true”并将显示一条验证消息。

保存所有更改，重新启动服务器，然后浏览到注册页面。尝试输入密码值，将显示一条验证消息，直到密码长度为8。

现在，为了突出显示无效的输入元素，我们可以使用一些样式。使用名为ngClass的AngularJS指令，我们可以使用$invalid属性动态突出显示错误的输入元素。因此，ngClass指令被添加到电子邮件和密码元素的父div中。

电子邮件输入有效的电子邮件。

密码& lt输入类型= & quot密码& quotname = & quot密码& quotclass = & quot表单控件& quotng模型= & quot用户密码& quotng-minlength = & quot；8 & quot& gt最小密码长度为8个字符。

保存更改，重新启动服务器，然后尝试浏览注册页面。现在，对于无效条目，验证消息将显示如下:

现在，正如您在上面的屏幕中看到的那样，在验证错误时注册按钮处于启用状态。除非输入的电子邮件和密码有效，否则我们将禁用它们。AngularJS提供了一个名为ngDisabled的指令，该指令有助于基于表达式禁用元素。如果验证了电子邮件和密码，将设置user.email和user.password模型。因此，我们将通过使用这两个对象来启用/禁用注册按钮。修改注册按钮HTML，如图所示:

& lt按钮类型= & quot按钮& quotng-禁用= & quot！user.email ||！用户密码& quotclass = & quotBTN BTN-LG BTN-主BTN-block & quot；& gt注册& lt/button & gt；如您所见，如果user.email或user.password不为false，ng-disabled将为true，这仅在数据无效时才会发生。

保存所有更改，重新启动服务器并刷新注册页面。您会注意到注册按钮已被禁用，并且在您输入有效的电子邮件地址和密码之前将一直保持禁用状态。

验证登录屏幕我们在登录屏幕上实现验证的方式与在注册屏幕上实现验证的方式非常相似。我建议您亲自验证登录屏幕作为练习。如果您遇到困难，请检查登录表单的修改HTML代码（位于home.html，如下所示:

）& ltform class = & quot表单登录name = & quotsigninForm&quotrole = & quot表单& quot& gt& ltdiv class = & quot表单组& quotng-class = & quot；{“有错误”:sign inform . email . $ invalid } & quot；& gt& lt标签& gt电子邮件& lt/label & gt；& lt输入类型= & quot电子邮件&quotname = & quot电子邮件&quotclass = & quot表单控件& quotng模型= & quot用户电子邮件& quot& gt& ltp class = & quot帮助阻止& quotng-show = & quot；sign inform . email . $ invalid & quot；& gt请输入有效的电子邮件。& lt/p & gt；& lt/div & gt；& ltdiv class = & quot表单组& quotng-class = & quot；{“has-error”:sign inform . password . $ invalid } & quot；& gt& lt标签& gt密码& lt/label & gt；& lt输入类型= & quot密码& quotname = & quot密码& quotclass = & quot表单控件& quotng模型= & quot用户密码& quotng-minlength = & quot；3 & quot& gt& ltp class = & quot帮助阻止& quotng-show = & quot；sign inform . password . $ error . minlength & quot；& gt最小密码长度为8个字符。& lt/p & gt；& lt/div & gt；& ltlabel class = & quot复选框& quot& gt& lta href = & quot#/注册& quot& gt注册& lt/a & gt；& lt/label & gt；& lt按钮ng-禁用= & quot！user.email ||！用户密码& quottype = & quot按钮& quotng-click = & quot；登录（$ event）& quot；class = & quotBTN BTN-LG BTN-主BTN-block & quot；& gt登录& lt/button & gt；& lt/form & gt；总结在本教程的这一部分中，我们创建了一个注册页面并为其设置了一条路线。我们还学习了如何使用AngularJS来验证注册页面。

在下一节中，我们将重点介绍注册功能和其他一些功能的实现。上述教程的源代码可以在GitHub上获得。

请在下面的评论中告诉我们你的想法！

这几篇文章你可能也喜欢：

• 暂无相关推荐文章

本文由主机参考刊发，转载请注明：继续旅程:使用AngularJS和Firebase从头构建Web应用程序:第2部分。 https://zhujicankao.com/109699.html