We see that this technology has been applied to a number of web pages. For example, a shopping cart, registration form, entry process, and many multi-step forms make it easier for users to fill out the form online.
Here we will build it:
Using the UI Router, it can embed state, display different view for each state, we can make multi-step form quite easy.
To quickly understand how UI router works, look at our article: Angularjs uses Ui-router routing
Let's get to the top of the list and start creating our best form!
Create a project
Creating a project has a template structure. Requires a layout file, a view file for each form, a format file, and a JavaScript file.
Here is the list of files, create them first, then fill in the contents
-Index.html- form.html -form-profile.html -form-interests.html -form-payment.html -App.js -Style.css
Each form-____.html represents an HTML file in the hierarchy. These structures ultimately create our form structure.
Our layout/template file index.html
We create a master file to introduce all the resources we need to start our project, where we use the index.html file as the primary file
Now we load the resources we need (ANGULARJS, nganimate, Ui Router, and other scripts and stylesheets) and set a ui-view to tell the Ui Router where our views need to be shown. Here we use Bootstrap to quickly apply styles.
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/3.1.1/darkly/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<!-- JS -->
<!-- load angular, nganimate, and ui-router -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.min.js"></script>
<script src="app.js"></script>
</head>
<!-- apply our angular app -->
<body ng-app="formApp">
<div class="container">
<!-- views will be injected here -->
<div ui-view></div>
</div>
</body>
</html>
Once all the files have been introduced, let's go into app.js and start creating angular applications and the most basic routing configuration. Notice how we apply the angular app (Formapp) to the body.
Create our angular App app.js
Now we're going to create applications and routes. In a large application, you certainly want to distribute your angular applications, routes, and controllers into their respective modules, but in order to complete our simple use cases, we will put them all in the app.js of this happy family.
Now we have an application that has been injected into the nganimate and Ui.router. We have also established the corresponding route. Notice how we define URLs, view files (Templateurl), and controllers for each view area.
The form will be our main view area. It has likewise one with. Partitioned child View Area Form.profile. This idea can be implemented when the application state changes (translator: May be routing, QueryString, etc.), the child view will be displayed in the master area. (Translator: And can be done to update only the child view area changes, record the child View area state).
We'll show you in the next section. Now we need to create a view for the form and its child view area.
Let's start with the new form.html. This file will act as a template in our remaining Form view files, just as index.html is used as the overall template for the entire project. All we have to do is include Ui-view in the file so that the nested declarations know where to inject their views.
<!-- form.html -->
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<div id="form-container">
<div class="page-header text-center">
<h2>Let's Be Friends</h2>
<!-- the links to our nested states using relative paths -->
<!-- add the active class if the state matches our ui-sref -->
<div id="status-buttons" class="text-center">
<a ui-sref-active="active" ui-sref=".profile"><span>1</span> Profile</a>
<a ui-sref-active="active" ui-sref=".interests"><span>2</span> Interests</a>
<a ui-sref-active="active" ui-sref=".payment"><span>3</span> Payment</a>
</div>
</div>
<!-- use ng-submit to catch the form submission and use our Angular function -->
<form id="signup-form" ng-submit="processForm()">
<!-- our nested state views will be injected here -->
<div id="form-views" ui-view></div>
</form>
</div>
<!-- show our formData as it is being typed -->
<pre>
{{ formData }}
</pre>
</div>
</div>
Notice how we used Ui-view for the second time in the project. This is where the UI router great: we can nest declarations and views. This can provide us with a lot of flexibility when we develop applications. Refer to the official documentation for the content of the UI router view.
To add a state-based activation class
We want each status button to be displayed when they are activated. To achieve this effect, we will use the ui-sref-active provided by the UI router. If the ui-sref is consistent with the current state, the class that we specify is added.
To add validation to your own form, see Angularjs form validation.
Now, you might want to know what our form really looks like. Let's open the browser and take a look.
So far, we haven't got all the content exactly as we hoped, but this is the beginning of a series of great things. Let's move on, add a little style, and then add some embedded views and comments.
Basic STYLINGSTYLE.CSS
We will design our Form-container and status-buttons to be our form to look better.
/* style.css */
/* BASIC STYLINGS
============================================================================= */
body { padding-top:20px; }
/* form styling */
#form-container { background:#2f2f2f; margin-bottom:20px;
border-radius:5px; }
#form-container .page-header { background:#151515; margin:0; padding:30px;
border-top-left-radius:5px; border-top-right-radius:5px; }
/* numbered buttons */
#status-buttons { }
#status-buttons a { color:#FFF; display:inline-block; font-size:12px; margin-right:10px; text-align:center; text-transform:uppercase; }
#status-buttons a:hover { text-decoration:none; }
/* we will style the span as the circled number */
#status-buttons span { background:#080808; display:block; height:30px; margin:0 auto 10px; padding-top:5px; width:30px;
border-radius:50%; }
/* active buttons turn light green-blue*/
#status-buttons a.active span { background:#00BC8C; }
Now that our buttons look better and more in line with what we want, next we'll look at the nested view.
Nested views form-profile.html, form-interests.html, form-payment.html
This part will be relatively simple. We will define different views with the input boxes that we need. and bind them to the Formdata object so that we can see the input data.
The following is our view file for nested views:
Form overview View
<!--form-profile.html--> <div class= "Form-group" > <label for= "name" >Name</label> <input type= "text" class= "Form-control" name= "name" ng-model= "Formdata.name" > </div> < Div class= "Form-group" > <label for= "email" >Email</label> <input type= "text" class= " Form-control "name=" email ng-model= "Formdata.email" > </div> <div class= "Form-group row" > <div class= "col-xs-6 col-xs-offset-3" > <a ui-sref= "form.interests" class= "btn btn-block btn-info > Next section <span class= "Glyphicon glyphicon-circle-arrow-right" ></span> </a> </div> </div>
Form interest View
<!--form-interests.html-->
<label>what ' s Your Console of choice?</label> <div class=
" Form-group ">
<div class=" Radio ">
<label>
<input type=" Radio "ng-model=" Formdata.type "value=" Xbox "checked>
I like Xbox
</label>
</div>
<div class=" Radio ">
<label>
<input type=" Radio "ng-model=" Formdata.type "value=" PS ">
I like PS4
</label>
</div>
</div>
<div class= "Form-group row" >
<div class= "Col-xs-6 col-xs-offset-3" >
<a ui-sref= "form.payment" class= "btn btn-block btn-info" >
Next Section <span class= "Glyphicon glyphicon-circle-arrow-right" ></span>
</a>
</div >
</div>
Form Payment View
<!--form-payment.html--> <div class= "Text-center" > <span class= "Glyphicon Glyphicon-heart" ></span>
Now that we have defined these views, they will appear when we browse the form. Again, we use the Next button and Ui-sref to connect each new view.
When using Ui-sref, you connect to the state defined in your route rather than the URL. Then angular will use this to build the href for you.
Here is the current page of our form.
To make our pages unusual, let's add animation effects.
Let our form produce an animation effect
Because at the beginning of the project, we have loaded the nganimate, it has been added to the class that needs animation. When the view enters or exits, it automatically adds class Ng-enter and Ng-leave.
Now all we have to do is form our final form through style. To understand the angular animation, this article is a good starting point.
Let's go into the CSS file, animate it, and apply it to our form
/* style.css */
/* ANIMATION STYLINGS
============================================================================= */
#signup-form { position:relative; min-height:300px; overflow:hidden; padding:30px; }
#form-views { width:auto; }
/* basic styling for entering and leaving */
/* left and right added to ensure full width */
#form-views.ng-enter,
#form-views.ng-leave { position:absolute; left:30px; right:30px;
transition:0.5s all ease; -moz-transition:0.5s all ease; -webkit-transition:0.5s all ease;
}
/* enter animation */
#form-views.ng-enter {
-webkit-animation:slideInRight 0.5s both ease;
-moz-animation:slideInRight 0.5s both ease;
animation:slideInRight 0.5s both ease;
}
/* leave animation */
#form-views.ng-leave {
-webkit-animation:slideOutLeft 0.5s both ease;
-moz-animation:slideOutLeft 0.5s both ease;
animation:slideOutLeft 0.5s both ease;
}
/* ANIMATIONS
============================================================================= */
/* slide out to the left */
@keyframes slideOutLeft {
to { transform: translateX(-200%); }
}
@-moz-keyframes slideOutLeft {
to { -moz-transform: translateX(-200%); }
}
@-webkit-keyframes slideOutLeft {
to { -webkit-transform: translateX(-200%); }
}
/* slide in from the right */
@keyframes slideInRight {
from { transform:translateX(200%); }
to { transform: translateX(0); }
}
@-moz-keyframes slideInRight {
from { -moz-transform:translateX(200%); }
to { -moz-transform: translateX(0); }
}
@-webkit-keyframes slideInRight {
from { -webkit-transform:translateX(200%); }
to { -webkit-transform: translateX(0); }
}
First, the style of the form is determined when the view leaves or goes in, and they are absolutely positioned. You need to be sure that one view does not go under another view when the view enters.
Second, apply our animations to the. Ng-enter and. Ng-leave class
Third, define animations with @keyframes. All of these parts are grouped together, and our form has angular animations, stateful UI router and angular data binding.
The above is a small compilation for you to share the Angularjs use UI Router to implement the knowledge of the Form Wizard, I hope to help you.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
