今天，我们将使用AngularJs，伟大的用户界面路由器和Angular ngAnimate模块来创建一个多步骤的动画形式。这种技术可以用于希望简化用户操作的大型表单。

我们可以看到，这项技术已经应用到了很多网页上。例如，购物车、登记表、入职流程和许多多步骤表单使用户更容易在线填写表单。

接下来我们将构建它：

通过用户界面路由器，它可以嵌入状态，并为每个状态显示不同的视图，因此我们可以使多步表单变得非常容易。

让我们言归正传，开始创造我们最好的形式吧！

创建项目

创建项目具有模板结构。它需要布局文件、每个表单的视图文件、格式文件和JavaScript文件。

这是文件清单。先创建它们，然后填写内容

-index . html-form . html-form-profile . html-form-interest . html-form-payment . html-app . js-style . CSS每个表单-____。html以层次结构表示HTML文件。这些结构最终创造了我们的形体结构。

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

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

现在，我们加载我们需要的资源(AngularJS、ngAnimate、UI Router和其他脚本和样式表)，并设置一个Ui视图来告诉Ui Router我们的视图需要显示在哪里。这里我们使用Bootstrap来快速应用样式。

！index.html！DOCTYPE html html head meta charset=' utf-8 '！- CSS - link rel='样式表' href='//netdna . bootstrapcdn.com/bootsswatch/3 . 1 . 1/blackly/bootstrap . min . CSS ' link rel='样式表' href='style.css '！- JS -！-加载angular、nganimate和ui-router-script src=' http://Ajax . googleapi.com/Ajax/libs/angular js/1 . 2 . 16/angular . min . js '/script script src=' http://cdnjs . cloudflare.com/Ajax/libs/angular-ui-router/0 . 2 . 10/angular-ui-router . min . js '/script script src=' 3358 Ajax . googleapi-应用我们的angular app-body ng-app=' FOrmapp ' div class=' container '！-这里会注入视图-div ui-view/div/div/body/html导入完所有文件后，我们去app.js开始创建Angular应用和基本的路由配置。注意我们如何将Angular App (formApp)应用到身体上。创建我们的角度应用

现在让我们创建应用程序和路由。在大型应用程序中，您肯定希望将您的Angular应用程序、路由和控制器分发到它们各自的模块中，但是为了完成我们的简单用例，我们将把它们都放在app.js的快乐家族中

//app.js//创建我们的angular app并注入锰酸盐和ui-router/============================================================================config(函数($stateProvider，$ urlRouterProvider){ $ state provider//route)来显示我们的基本表单(/形式).状态(' form '，{ url: '/form '，templateUrl: 'form.html '，controller : ' form controller ' })//嵌套状态//这些部分中的每一个都将有自己的视图//url将被嵌套(/形式/概况). state('form.profile '，{ url: '/profile '，Templateurl : ' form-profile。html ' })//URL将为/形式/兴趣.状态('形式。利息'，{ URL : '/利息'，模板URL : '表单-利息。html ' })//URL将为/表格/付款.state('form.payment '，{ url: '/payment '，Templateurl : ' form-payment。html ' })；//捕获所有路由//将用户发送到表单页面$ urlRouterProvider。其他('/表单/配置文件')；}) //我们的表单控制器/===========================================================================控制器(' formController '，函数($scope) { //我们将在这个对象$scope.formData={}中存储我们所有的表单数据；//处理表单$ scope。processform=function(){ alert('真棒!');};});现在我们拥有了一个已经注入了锰酸盐和ui.router的应用。我们同样也建立了相应的路由。注意我们是如何为每一个视图区域定义url，视图文件(templateUrl)和控制器的。

形式将是我们的主视图区域。它同样有一个以。分割的子视图区域表格。简介。这种想法能实现在应用状态发生变化时（译者：可能是路由、查询字符串等),子视图将会在主视图区域中显示出来。(译者：而且可以作到仅更新子视图区域变化，记录子视图区域状态)。

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

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

！-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咱们做朋友吧/h2！-使用相对路径到嵌套状态的链接-!-如果状态与我们的ui-sref-div id=' status-buttons ' class=' text-center ' a ui-sref-active=' active ' ui-sref='相匹配，则添加活动类配置文件“span 1/span配置文件/a ui-sref-active=‘active’ui-sref=’.兴趣span2/span兴趣/a ui-sref-active=' active ' ui-sref=' active ' .付款span3/span付款/a /div /div！-使用ng-提交捕捉表单提交并使用我们的有角的函数-表单id='注册-表单ng-submit='processForm()'！-我们的嵌套状态视图将在这里注入-div id=' form-view ' ui-view/div/form/div！-显示正在键入的表单数据- pre {{ formData }} /pre /div/div注意我们是如何第二次在项目中使用用户界面视图的。这就是用户界面路由器伟大的地方：我们可以嵌套声明和视图。这能够在我们开发应用时提供给我们非常多的灵活性。关于用户界面路由器视图的内容，请参见官方文档。

添加基于状态的激活类

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

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

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

基础Stylingstyle.css

我们将设计我们的表单容器和状态按钮来是我们的表单看起来更好。

/* STYLe。CSS *//* BASIC STYLENS==================================================================*/body { padding-top 336020 px；} /*表单样式*/#表单容器{ background: # 2f2f2f边距-底部：20 px边界半径：5像素；} #表单容器。页眉{ background : # 151515 margin 33600 padd :30 px边框-左上角-半径：5 px边框-右上角-半径：5 px} /*编号按钮*/#状态按钮{ } #状态按钮a { color : # FFF；显示：内嵌块；font-size :12 px右边距：10 px文本对齐：居中；文本转换：大写；} # status-button a :悬停{ text-decoration : none} /*我们将把跨度设置为带圆圈的数字*/#状态按钮跨度{ background: # 080808显示：块；高度：30 pxmargin :0 auto 10 xpadding-top :5 px；宽度：30 px边界半径：50%;} /*活动按钮变为浅绿色-蓝色*/#状态-按钮a。活动范围{ background: # 00BC8C}现在我们的按钮更好看了并且更符合我们想要的了，接下来我们看下嵌套视图。嵌套视图form-profile.html、form-interests.html、form-payment.html

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

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

！-form-profile . html-div class=' form-group '标签为='name '名称/标签输入类型=' text ' class=' form-control ' name=' name ' ng-model=' form data。名称'/div class='表单组'标签为='电子邮件'电子邮件/标签输入类型=' text ' class=' form-control ' name=' email ' ng-model=' form data。电子邮件'/div class=' form-group row ' div class=' col-xs-6 col-xs-offset-3 ' a表单兴趣视图

！-表单-兴趣. html-标签你选择的控制台是什么？/label div class=' form-group ' div class=' radio '标签输入类型=' radio ' ng-model=' formdata。“type”值=“XBOX”选中我喜欢XBOX/label/div class=' radio '标签输入类型=' radio ' ng-model=' formdata。类型'值=' PS '我喜欢PS4/label/div/div class=' form-group row ' div class=' col-xs-6 col-xs-offset-3 ' a ui-sref=' form。付款表单支付视图

！-表单-付款. html-谢谢你的钱！/h3按钮类型='提交BTNBTN危险'提交/按钮/div既然我们已经定义了这些视图，那么当我们浏览表单时，他们就会显示出来。同样我们用下一个按钮和ui-sref来连接每一个新视图。

当使用ui-sref时，你要连接到你路由中定义的状态而不是网址。然后有角的会使用这个来为你构建href。

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

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

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

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

让我们进去钢性铸铁文件，将动画，并应用到我们的表单上

/* STYLe。CSS *//* ANIMATION STYLENS======================================================================*/#登记表{位置：相对；最小高度：300 px飞越：隐藏；padding:30px } #表单视图{ width:auto} /*添加了输入和离开的基本样式*//*左右以确保全宽*/#表单-视图。ng-enter，# form-view。ng-leave {位置：绝对；左：30像素右：30像素过渡：0.5秒全部缓解；-moz-transit :0.5s一切顺利；-WebKit-transit :0.5s一切轻松；} /*输入动画*/#表单-视图。ng-enter {-web套件-动画： slideinright 0.5s两者轻松；-moz-动画：在0.5s内滑动两者轻松；动画：幻灯片右0.5s既轻松；} /*离开动画*/#表单-视图。ng-离开{-网络工具包-动画：滑出左0.5s两者轻松；-moz-动画：向左滑动0.5s两者轻松；动画：度向左0.5s两者都轻松；} /*动画========================================================================================================================================} @-moz-关键帧向左滑出{ to {-moz-transform : translateX(-200%)； } } @-网络工具包-关键帧向左滑出{ to {-web kit-transform : translateX(-200%)；}} /*从右侧滑入*/@关键帧滑入右侧{来自{ transform : translatex(200%)；}到{ transform : translateX(0)；} } @-moz-关键帧幻灯片右{来自{-moz-transform : translatex(200%)；}到{-moz-transform : translateX(0)；} } @-网络工具包-关键帧在right { from {-web kit-transform : translatex(200%)中滑动；}到{-web kit-transform : translateX(0)；}}首先，确定视图离开或进去时，表单的样式，他们是绝对定位的。需要确认当视图进入的时候一个视图不会放到另一个视图的下面。

其次，应用我们的动画到ng-输入和树叶类

第三，用@个关键帧定义动画。所有这些部分组合到一起，我们的表单就有了有角的动画，基于状态的用户界面路由器和有角的数据绑定。