本文转自:http://www.oschina.net/translate/angularjs-multi-step-form-using-ui-router

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

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

下面我们将构建它:

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

为了快速的理解UI Router是怎样工作的,看我们的文章:AngularJS使用UI-Router路由

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

地狱星星 翻译于 11个月前

0人顶

 

 翻译的不错哦!

创建工程

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

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

1
2
3
4
5
6
7
- index.html
- form.html
- form-profile.html
- form-interests.html
- form-payment.html
- app.js
- style.css

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

petert 翻译于 11个月前

0人顶

 

 翻译的不错哦!

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!-- 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 上面的。

CandySunPlus 翻译于 10个月前

1人顶

 

 翻译的不错哦!

创建我们的Angular App app.js

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
// 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以及它的子视图区域创建视图。

CandySunPlus 翻译于 10个月前

1人顶

 

 翻译的不错哦!

表单模板视图 form.html

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!-- 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表单验证

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

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

0x0bject 翻译于 10个月前

0人顶

 

 翻译的不错哦!

基础Stylingstyle.css

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/* style.css */
/* BASIC STYLINGS
============================================================================= */
body                            { padding-top:20px; }
 
/* form styling */
#form-container                { background:#2f2f2fmargin-bottom:20px;
    border-radius:5px; }
#form-container .page-header   { background:#151515margin:0padding:30px
    border-top-left-radius:5px; border-top-right-radius:5px; }
 
/* numbered buttons */
#status-buttons                 {  }
#status-buttons a               { color:#FFFdisplay:inline-blockfont-size:12pxmargin-right:10pxtext-align:centertext-transform:uppercase; }
#status-buttons a:hover         { text-decoration:none; }
 
/* we will style the span as the circled number */
#status-buttons span            { background:#080808display:blockheight:30pxmargin:0 auto 10pxpadding-top:5pxwidth: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对象以便我们能看到输入的数据。

下面是我们用于嵌套视图的视图文件:

表单概要视图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!-- 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>

表单兴趣视图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!-- 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>

表单支付视图

1
2
3
4
5
6
7
<!-- 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来连接每一个新视图.

GoodLoser 翻译于 10个月前

0人顶

 

 翻译的不错哦!

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

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

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

GoodLoser 翻译于 11个月前

0人顶

 

 翻译的不错哦!

让我们的表单产生动画效果

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
/* style.css */
/* ANIMATION STYLINGS
============================================================================= */
#signup-form            { position:relativemin-height:300pxoverflow:hiddenpadding: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:absoluteleft:30pxright:30px;
    transition:0.5all ease; -moz-transition:0.5all ease; -webkit-transition:0.5all ease; 
}
     
/* enter animation */
#form-views.ng-enter            { 
    -webkit-animation:slideInRight 0.5both ease;
    -moz-animation:slideInRight 0.5both ease;
    animation:slideInRight 0.5both ease; 
}
 
/* leave animation */
#form-views.ng-leave            { 
    -webkit-animation:slideOutLeft 0.5both ease;
    -moz-animation:slideOutLeft 0.5both ease;
    animation:slideOutLeft 0.5both 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数据绑定。

地狱星星 翻译于 10个月前

1人顶

 

 翻译的不错哦!

结论

UI-Router, ngAnimate, 和其他很多有趣的 Angular功能会创建出很多很棒的应用 希望本文能展示给你一些创建Angular应用的小技巧和编译的工具使用方法 t.

这些概念也能引申到其他用户界面设计方面, 尤其在发挥你的创造性方面提供指引.感谢你花时间阅读本文,如有疑问欢迎指正.

petert 翻译于 11个月前

0人顶

 

 翻译的不错哦!

本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接 我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们

[转]AngularJS 使用 UI Router 实现表单向导的更多相关文章

  1. AngularJS 使用 UI Router 实现表单向导

    Today we will be using AngularJS and the great UI Router and the Angular ngAnimate module to create ...

  2. 6 个基于 jQuery 的表单向导插件推荐

    表单向导可以很好地引导用户进行一步一步的操作,从而降低用户错误输入的几率.尽管互联网中有大量的类似插件,但真正好用的不多. 本文整理了6个比较优秀的表单向导插件,希望能够为你带来帮助. 1. Smar ...

  3. phpcms v9 的表单向导功能的使用方法

    本文主要介绍phpcms v9的表单向导功能是如何使用的,并副多个案例讲解: 先介绍一下v9 的表单向导如何使用 表单向导做的很实用,生成一个表单,常用的是把它作为一个留言板,或者在招聘栏目作为一个供 ...

  4. phpcms v9 的表单向导功能的使用方法 附多个案例

    本文主要介绍phpcms v9的表单向导功能是如何使用的,并副多个案例讲解: 先介绍一下v9 的表单向导如何使用 表单向导做的很实用,生成一个表单,常用的是把它作为一个留言板,或者在招聘栏目作为一个供 ...

  5. PHPCMS v9的表单向导实现问答咨询功能的方法

    本文主要介绍了在phpcms v9的表单向导里实现问答咨询功能的方法 phpcms v9内容管理系统本身是没有问答模块的,只有表单向导,但表单向导有很大的局限性,通过表单向导,我们只能查看用户提交的信 ...

  6. 使用jQuery ui创建模态表单

    jQuery UI 是一个建立在 jQuery JavaScript 库上的小部件和交互库,可以使用它创建高度交互的 Web 应用程序. 在web页面的开发过程中,在添加元素的时候需要用到弹出窗口添加 ...

  7. AngularJS(七):表单-单选框、下拉列表

    本文也同步发表在我的公众号“我的天空” 单选框 在AngulerJS中单选框的处理与复选框有不少相似之处,我们来看以下示例: <body ng-app="myApp" ng- ...

  8. AngularJS(五):表单及输入验证

    本文也同步发表在我的公众号“我的天空” 表单基础 表单是HTML中很重要的一个部分,基本上我们的信息录入都依靠表单,接下来我们学习如何在AngularJS中使用表单,首先看以下示例代码: <bo ...

  9. vue2.0+Element UI 实现动态表单(点击按钮增删一排输入框)

    对于动态增减表单项,Element UI 官方文档表单那一节已经介绍得很清楚了,我之前没有看见,绕了很多弯路,这里针对点击按钮增删一排输入框的问题做一个总结. 效果图如下 存在一排必填的姓名与手机号, ...

随机推荐

  1. 数据结构_find_lucky_number(寻找幸运值)

    数据结构_find_lucky_number(寻找幸运值) 问题描述 给出两个已按升序排列的数组 a[1..n],b[1..m],如果存在 i,j,使得a[i]+b[j]==k,我们便说已找到幸运值. ...

  2. java反射机制的进一步理解

    承上一篇. JAVA反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对于任意一个对象,都能够调用它的任意一个方法:这种动态获取的信息以及动态调用对象的方法的功能称为java语 ...

  3. Web信息架构:设计大型网站(第3版) [美]Peter Morville 中文PDF扫描版

    新版Web信息架构设计大型网站针对新技术做了全面更新——搭配新颖范例.全新场景及最佳实践信息——但是,其焦点依然放在基础原理上.其结构严谨,图文并貌,内容涵盖了信息架构基本原理和实践应用的方方面面. ...

  4. 国内物联网平台(1):百度物接入IoT Hub

    国内物联网平台(1) ——百度物接入IoT Hub 马智 物接入IoT Hub - 架构 全托管的云服务,帮助建立设备与云端之间安全可靠的双向连接 支撑海量设备的数据收集.监控.故障预测等各种物联网场 ...

  5. Android proguard代码混淆

    为什么要代码混淆? Android的安装文件是apk格式.APK是AndroidPackage的缩写.是由android sdk编译的工程打包生成的安装程序文件. Apk其实是zip文件,但是后缀名被 ...

  6. HTTP 协议 -- 基础

    概述 HTTP 是基于 TCP/IP 协议的应用层协议,它不涉及数据包(packet)的传输,主要是规定客户端和服务器之间的通信格式,默认使用 80 端口.   HTTP 协议最早版本是 HTTP/0 ...

  7. 动态变更GridView控件列名

    近段时间,确是很多专案要写,客户的个性化要求也越来越多.举个例子吧,就是从数据库取出来的字段名,在显示在GridView时,需要全部更为另外一个名称.下面的样例,并非是专案的内容,而是Insus.NE ...

  8. JavaScript 测试和捕捉(try与catch)

    JavaScript 测试和捕捉 try 语句允许我们定义在执行时进行错误测试的代码块. catch 语句允许我们定义当 try 代码块发生错误时,所执行的代码块. JavaScript 语句 try ...

  9. Java从入门到放弃——03.循环和判断

    本文目标 选择结构:if,switch 循环结构:for , foreach ,while,do while 跳出语句:break,continue 1.选择结构 if: if(判断语句){  } s ...

  10. laravel5.2总结--返回值

    基本概念和概述 1>StdClass 对象=>基础的对象 2>Eloquent 模型对象(Model 对象)=>和模型相关的类对象 3>Eloquent 集合=>可 ...