AngularJS使用UI Router实现表单向导

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

我们将在下面构建它：

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

要快速了解UI路由器是如何工作的，请阅读我们的文章：AngularJS使用UI-Router路由。

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

创建项目。

创建项目具有模板结构。它需要布局文件、每个表单的视图文件、格式文件和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的快乐家族中

现在我们有一个已经注入了ngAnimate和ui.router的应用程序，我们也建立了相应的路由。请注意我们如何为每个视图区域定义url、templateUrl和控制器。

表单将是我们的主要查看区域。它还有一个子视图区域表单。这个想法可以实现当应用程序状态改变时(翻译器：可能是路由、queryString等。)，子视图将显示在主视图区域。(翻译器：而且只能更新子视图区域的变化，可以记录子视图区域的状态)。

我们将在下一节中演示它。现在我们需要为窗体及其子视图区域创建一个视图。

让我们从新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咱们做朋友吧/h2！-使用相对路径到嵌套状态的链接-!-如果状态与我们的ui-sref-div id=' status-buttons ' class=' text-center ' a ui-sref-active=' active ' ui-sref='相匹配，则添加活动类。配置文件span1/span配置文件/a ui-sref-active=' active ' ui-sref=' active ' .兴趣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和当前状态一致，则会添加我们指定的类。

为了给自己的表单添加验证，请参见AngularJS表单验证。

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

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

基础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 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-输入和树叶类

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

以上所述是小编给大家分享的AngularJS使用用户界面路由器实现表单向导的相关知识，希望对大家有所帮助。