使用AngularJS实现表单向导的方法


Posted in Javascript onJune 19, 2015

今天我们将使用AngularJs和伟大的UI Router以及Angular ngAnimate module创建一个带动画的多步表单。这项技术可以用在你想要简化用户操作的大表单上。

我们看到这项技术已经应用在了许多的网页上。比如购物车,注册表单,入职流程以及许多多步表单,让用户更容易在线填写表单。

下面我们将构建它:

使用AngularJS实现表单向导的方法

使用UI Router,它能内嵌状态,为每个状态显示不同的view,我们能让多步表单变得相当的容易。

让我们言归正传,开始创建我们的最棒的表单!

创建工程

创建工程有个模板结构. 需要个 布局文件 , 每个表单的视图文件, 格式文件, 以及JavaScript 文件.

下面就是文件清单,先创建好它们,接着在填充内容
 

  • - index.html
  • - form.html
  • - form-profile.html
  • - form-interests.html
  • - form-payment.html
  • - app.js
  • - style.css

每个表单-____.html表示层级结构中的html文件. 这些结构最终创建我们的表单结构.

我们的布局/模板文件 index.html

我们通过建立一个主文件来引入我们所需要的所有资源以开始我们的项目 ,这里我们使用 index.html 文件作为主文件

现在,我们加载我们所需的资源(AngularJS, ngAnimate, Ui Router, 以及其他脚本和样式表)并且设定一个 ui-view用来告知 UI Router 我们的视图需要显示到哪里。这里我们使用 Bootstrap 来快速应用样式。
 

<!-- 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>

完成所有文件的引入后,让我们进入 app.js 开始创建Angular应用和最基本的路由配置。 注意我们是如何把Angular App (formApp) 应用到 body 上面的。
 
创建我们的Angular App app.js

现在我们来创建应用和路由。 在一个大型应用中, 你肯定希望把你的Angular应用、路由、控制器分布到它们各自的模块中,但是为了完成我们的简单用例,我们将把它们都放到app.js这个欢乐的大家庭中。

 

// app.js
// create our angular app and inject ngAnimate and ui-router 
// =============================================================================
angular.module('formApp', ['ngAnimate', 'ui.router'])
 
// configuring our routes 
// =============================================================================
.config(function($stateProvider, $urlRouterProvider) {
   
  $stateProvider
   
    // route to show our basic form (/form)
    .state('form', {
      url: '/form',
      templateUrl: 'form.html',
      controller: 'formController'
    })
     
    // nested states 
    // each of these sections will have their own view
    // url will be nested (/form/profile)
    .state('form.profile', {
      url: '/profile',
      templateUrl: 'form-profile.html'
    })
     
    // url will be /form/interests
    .state('form.interests', {
      url: '/interests',
      templateUrl: 'form-interests.html'
    })
     
    // url will be /form/payment
    .state('form.payment', {
      url: '/payment',
      templateUrl: 'form-payment.html'
    });
     
  // catch all route
  // send users to the form page 
  $urlRouterProvider.otherwise('/form/profile');
})
 
// our controller for the form
// =============================================================================
.controller('formController', function($scope) {
   
  // we will store all of our form data in this object
  $scope.formData = {};
   
  // function to process the form
  $scope.processForm = function() {
    alert('awesome!');
  };
   
});

现在我们拥有了一个已经注入了ngAnimate和ui.router的应用。 我们同样也建立了相应的路由。注意我们是如何为每一个视图区域定义 url,视图文件(templateUrl) 和 控制器的。

form 将是我们的主视图区域。它同样有一个以 . 分割的子视图区域 form.profile。这种想法能实现在应用状态发生变化时(译者:可能是路由、queryString等),子视图将会在主视图区域中显示出来。(译者:而且可以作到仅更新子视图区域变化,记录子视图区域状态)。

我们将在下一节中进行演示。 现在我们需要为form以及它的子视图区域创建视图。
 表单模板视图 form.html

让我们从新建form.html开始。这个文件将会在我们剩下的表单视图文件中充当模板的作用,正如index.html被用作整个项目的总体模板一样。我们所要作的是在该文件中包含ui-view,这样可以使嵌套声明知道该在何处注入他们的视图。
 

<!-- 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>

注意我们是如何第二次在项目中使用ui-view的。这就是UI Router伟大的地方:我们可以嵌套声明和视图。这能够在我们开发应用时提供给我们非常多的灵活性。关于UI Router视图的内容,请参见官方文档。

添加基于状态的激活类

我们希望每一个状态按钮能够在他们被激活时展示。为了达到这个效果,我们将会使用UI Router提供的ui-sref-active。如果ui-sref和当前状态一致,则会添加我们指定的类。

现在,你可能想知道我们的表单究竟看起来是什么样子。让我们打开浏览器看一眼。

使用AngularJS实现表单向导的方法

 目前为止,我们并没有完全按照希望的那样得到所有的内容,但是这是一系列伟大事情的开端。让我们继续前进,添加一点样式,之后会添加一些嵌入视图和注释。

基础Stylingstyle.css

我们将设计我们的form-container和status-buttons来是我们的表单看起来更好。
 

/* 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; }

现在我们的按钮更好看了并且更符合我们想要的了,接下来我们看下嵌套视图。
嵌套视图form-profile.html, form-interests.html, form-payment.html

这部分会比较简单。我们将定义不同的带有我们需要的输入框的视图。并且将他们绑定到formData对象以便我们能看到输入的数据。

下面是我们用于嵌套视图的视图文件:
表单概要视图
 

<!-- 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-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.html -->
<div class="text-center">
  <span class="glyphicon glyphicon-heart"></span>
  <h3>Thanks For Your Money!</h3>
   
  <button type="submit" class="btn btn-danger">Submit</button>
</div>

既然我们已经定义了这些视图,那么当我们浏览表单时,他们就会显示出来。同样我们用下一个按钮和ui-sref来连接每一个新视图.

当使用ui-sref时,你要连接到你路由中定义的state而不是URL。然后Angular会使用这个来为你构建href。

下面是我们表单目前的每一个页面。

使用AngularJS实现表单向导的方法

使用AngularJS实现表单向导的方法

使用AngularJS实现表单向导的方法

为了让我们的页面不同寻常,让我们加上动画效果。
 
让我们的表单产生动画效果

因为在项目开始的时候,我们已经加载了ngAnimate,它已经添加到需要动画的的类上了。当视图进入或退出的时候,它将自动添加类ng-enter和ng-leave。

现在我们所有做的就是通过样式形成我们最终的表单。为了理解Angular动画,这篇文章是一个很好的起点。

让我们进去css文件,将动画,并应用到我们的表单上
 

/* 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); }
}

首先,确定视图离开或进去时,表单的样式,他们是绝对定位的。需要确认当视图进入的时候一个视图不会放到另一个视图的下面。

其次,应用我们的动画到.ng-enter和.ng-leave类

第三,用@keyframes定义动画。所有这些部分组合到一起,我们的表单就有了Angular动画,基于状态的UI Router和Angular数据绑定。

Javascript 相关文章推荐
Firefox 无法获取cssRules 的解决办法
Oct 11 Javascript
JQuery 1.6发布 性能提升,同时包含大量破坏性变更
May 10 Javascript
使用js判断控件是否获得焦点
Jan 03 Javascript
node.js中的fs.statSync方法使用说明
Dec 16 Javascript
javascript正则表达式总结
Feb 29 Javascript
javascript实现仿百度图片的瀑布流加载效果
Apr 20 Javascript
Vue.js实战之组件的进阶
Apr 04 Javascript
react实现点击选中的li高亮的示例代码
May 24 Javascript
利用Angular2的Observables实现交互控制的方法
Dec 27 Javascript
layui form表单提交后实现自动刷新
Oct 25 Javascript
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 jQuery
解决vant的Toast组件时提示not defined的问题
Nov 11 Javascript
举例详解AngularJS中ngShow和ngHide的使用方法
Jun 19 #Javascript
使用AngularJS和PHP的Laravel实现单页评论的方法
Jun 19 #Javascript
测试IE浏览器对JavaScript的AngularJS的兼容性
Jun 19 #Javascript
使用ngView配合AngularJS应用实现动画效果的方法
Jun 19 #Javascript
Backbone.js的Hello World程序实例
Jun 19 #Javascript
使用AngularJS处理单选框和复选框的简单方法
Jun 19 #Javascript
详细分析使用AngularJS编程中提交表单的方式
Jun 19 #Javascript
You might like
php中preg_replace_callback函数简单用法示例
2016/07/21 PHP
基于JQUERY的多级联动代码
2012/01/24 Javascript
js+JQuery返回顶部功能如何实现
2012/12/03 Javascript
解析jquery获取父窗口的元素
2013/06/26 Javascript
简单的JavaScript互斥锁分享
2014/02/02 Javascript
jQuery $命名冲突解决方案汇总
2014/11/13 Javascript
JavaScript 开发工具webstrom使用指南
2014/12/09 Javascript
jquery简单图片切换显示效果实现方法
2015/01/14 Javascript
JS 作用域与作用域链详解
2015/04/07 Javascript
jQuery手动点击实现图片轮播特效
2020/04/20 Javascript
Bootstrap CSS组件之大屏幕展播
2016/12/17 Javascript
JavaScript 栈的详解及实例代码
2017/01/22 Javascript
nodeJS实现简单网页爬虫功能的实例(分享)
2017/06/08 NodeJs
前端构建工具之gulp的语法教程
2017/06/12 Javascript
详解Angular CLI + Electron 开发环境搭建
2017/07/20 Javascript
vue.js实现会动的简历(包含底部导航功能,编辑功能)
2019/04/08 Javascript
vue动态循环出的多个select出现过的变为disabled(实例代码)
2019/11/10 Javascript
ES6 Generator基本使用方法示例
2020/06/06 Javascript
JavaScript 事件代理需要注意的地方
2020/09/08 Javascript
html5以及jQuery实现本地图片上传前的预览代码实例讲解
2021/03/01 jQuery
打印出python 当前全局变量和入口参数的所有属性
2009/07/01 Python
Python函数参数操作详解
2018/08/03 Python
Python Django简单实现session登录注销过程详解
2019/08/06 Python
Python使用指定字符长度切分数据示例
2019/12/05 Python
pytorch之添加BN的实现
2020/01/06 Python
Keras 快速解决OOM超内存的问题
2020/06/11 Python
Python函数__new__及__init__作用及区别解析
2020/08/31 Python
如何利用pycharm进行代码更新比较
2020/11/04 Python
Waterford美国官网:爱尔兰水晶制品品牌
2017/04/26 全球购物
优秀班集体获奖感言
2014/02/03 职场文书
课前三分钟演讲稿
2014/04/24 职场文书
总经理人事任命书
2014/06/05 职场文书
党员个人总结范文
2015/02/14 职场文书
2015年语文教师工作总结
2015/05/25 职场文书
远程教育培训心得体会
2016/01/09 职场文书
详解CSS中postion和opacity及cursor的特性
2022/08/14 HTML / CSS