CMS Tutorial
WordPress
Continuing the journey: Building a web app from scratch with AngularJS and Firebase: Part 2
Continuing the journey: Building a web app from scratch with AngularJS and Firebase: Part 2
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/>
Form validation in AngularJS
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 提供了一个名为 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 上获取。
请在下面的评论中告诉我们您的想法！
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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1653
14
1413
52
1304
25
1251
29
1224
24
How To Begin A WordPress Blog: A Step-By-Step Guide For Beginners
Apr 17, 2025 am 08:25 AM
Blogs are the ideal platform for people to express their opinions, opinions and opinions online. Many newbies are eager to build their own website but are hesitant to worry about technical barriers or cost issues. However, as the platform continues to evolve to meet the capabilities and needs of beginners, it is now starting to become easier than ever. This article will guide you step by step how to build a WordPress blog, from theme selection to using plugins to improve security and performance, helping you create your own website easily. Choose a blog topic and direction Before purchasing a domain name or registering a host, it is best to identify the topics you plan to cover. Personal websites can revolve around travel, cooking, product reviews, music or any hobby that sparks your interests. Focusing on areas you are truly interested in can encourage continuous writing
How to adjust the wordpress article list
Apr 20, 2025 am 10:48 AM
There are four ways to adjust the WordPress article list: use theme options, use plugins (such as Post Types Order, WP Post List, Boxy Stuff), use code (add settings in the functions.php file), or modify the WordPress database directly.
How to get logged in user information in WordPress for personalized results
Apr 19, 2025 pm 11:57 PM
Recently, we showed you how to create a personalized experience for users by allowing users to save their favorite posts in a personalized library. You can take personalized results to another level by using their names in some places (i.e., welcome screens). Fortunately, WordPress makes it very easy to get information about logged in users. In this article, we will show you how to retrieve information related to the currently logged in user. We will use the get_currentuserinfo(); function. This can be used anywhere in the theme (header, footer, sidebar, page template, etc.). In order for it to work, the user must be logged in. So we need to use
How to display child categories on archive page of parent categories
Apr 19, 2025 pm 11:54 PM
Do you want to know how to display child categories on the parent category archive page? When you customize a classification archive page, you may need to do this to make it more useful to your visitors. In this article, we will show you how to easily display child categories on the parent category archive page. Why do subcategories appear on parent category archive page? By displaying all child categories on the parent category archive page, you can make them less generic and more useful to visitors. For example, if you run a WordPress blog about books and have a taxonomy called "Theme", you can add sub-taxonomy such as "novel", "non-fiction" so that your readers can
How to sort posts by post expiration date in WordPress
Apr 19, 2025 pm 11:48 PM
In the past, we have shared how to use the PostExpirator plugin to expire posts in WordPress. Well, when creating the activity list website, we found this plugin to be very useful. We can easily delete expired activity lists. Secondly, thanks to this plugin, it is also very easy to sort posts by post expiration date. In this article, we will show you how to sort posts by post expiration date in WordPress. Updated code to reflect changes in the plugin to change the custom field name. Thanks Tajim for letting us know in the comments. In our specific project, we use events as custom post types. Now
Is WordPress easy for beginners?
Apr 03, 2025 am 12:02 AM
WordPress is easy for beginners to get started. 1. After logging into the background, the user interface is intuitive and the simple dashboard provides all the necessary function links. 2. Basic operations include creating and editing content. The WYSIWYG editor simplifies content creation. 3. Beginners can expand website functions through plug-ins and themes, and the learning curve exists but can be mastered through practice.
How to Automate WordPress and Social Media with IFTTT (and more)
Apr 18, 2025 am 11:27 AM
Are you looking for ways to automate your WordPress website and social media accounts? With automation, you will be able to automatically share your WordPress blog posts or updates on Facebook, Twitter, LinkedIn, Instagram and more. In this article, we will show you how to easily automate WordPress and social media using IFTTT, Zapier, and Uncanny Automator. Why Automate WordPress and Social Media? Automate your WordPre
How to display query count and page loading time in WordPress
Apr 19, 2025 pm 11:51 PM
One of our users asked other websites how to display the number of queries and page loading time in the footer. You often see this in the footer of your website, and it may display something like: "64 queries in 1.248 seconds". In this article, we will show you how to display the number of queries and page loading time in WordPress. Just paste the following code anywhere you like in the theme file (e.g. footer.php). queriesin
