AngularJS 使用 UI Router 实现表单向导_AngularJS_脚本之家

What's Your Console of Choice?    I like XBOX      I like PS4    Next Section  

这部分会比较轻松。大家将概念不一样的盈盈我们要求的输入框的视图。而且将他们绑定到formData对象以便大家能看见输入的数码。

  Thanks For Your Money! Submit
- index.html- form.html- form-profile.html- form-interests.html- form-payment.html- app.js- style.css

咱们将两全咱们的form-container和status-buttons来是我们的表单看起来越来越好。

为了给和谐的表单增添验证,请参见AngularJS表单验证。

上面正是文件清单,先创立好它们,接着在填写内容

表单支付视图

表单兴趣视图

   Let's Be Friends    1 Profile 2 Interests 3 Payment       {{ formData }} 

为了让我们的页面不相同日常,让大家增加动画效果。

注意大家是怎么着第二遍在品种中利用ui-view的。那就是UI
Router伟大的地点:大家能够嵌套表明和视图。那能够在我们付出使用时提须要大家那多少个多的圆滑。关于UI
Router视图的剧情,请参见 官方文书档案。

既然我们早就定义了这么些视图,那么当大家浏览表单时,他们就能够显得出来。同样我们用下一个开关和ui-sref来连接每多个新视图.

变成具有文件的引进后,让大家进去 app.js
开端创制Angular应用和最宗旨的路由配置。 注意大家是怎么着把Angular App
应用到 body 上面包车型客车。

我们就要下一节中张开事必躬亲。
未来大家供给为form以至它的子视图区域创设视图。

为了飞快的知晓UI
Router是怎么着职业的,看大家的篇章:AngularJS使用UI-Router路由

未来我们的按钮越来越美观了并且更符合大家想要的了,接下去大家看下嵌套视图。

开创我们的Angular App app.js

表单概要视图

率先,明确视图离开或步入时,表单的体制,他们是纯属定位的。须求承认当视图进入的时候三个视图不会安放另贰个视图的下面。

让我们步入css文件,将动漫,并动用到我们的表单上

让大家的表单位面积产能生动漫效果

应用UI
Router,它能内嵌状态,为各样意况展现差异的view,我们能让多步表单变得十一分的轻易。

各个表单-____.html代表层级布局中的html文件.
这几个布局最后创立大家的表单结构.

创设工程有个模板构造. 须要个 结构文件 , 种种表单的视图像和文字件, 格式文件,
以至JavaScript 文件.

下边是我们用来嵌套视图的视图文件:

其三,用@keyframes定义动漫。全体那一个有些构成到手拉手,大家的表单就有了Angular动漫,基于状态的UI
Router和Angular数据绑定。

/* 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; }}@-moz-keyframes slideOutLeft { to { -moz-transform: translateX; }}@-webkit-keyframes slideOutLeft { to { -webkit-transform: translateX; }}/* slide in from the right */@keyframes slideInRight { from { transform:translateX; } to { transform: translateX; }}@-moz-keyframes slideInRight { from { -moz-transform:translateX; } to { -moz-transform: translateX; }}@-webkit-keyframes slideInRight { from { -webkit-transform:translateX; } to { -webkit-transform: translateX; }}

嵌套视图form-profile.html, form-interests.html, form-payment.html

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

咱俩见到这项技能早已接纳在了大多的网页上。举个例子购物车,注册表单,入职流程以致众多多步表单,让顾客更易于在线填写表单。

前天大家具有了三个一度注入了ngAnimate和ui.router的利用。
我们同样也创造了相应的路由。注意我们是何等为每多个视图区域定义
url,视图像和文字件 和 调控器的。

这段日子,我们加载大家所需的能源(AngularJS, ngAnimate, Ui Router,
以致别的脚本和样式表)何况设定三个 ui-view用来报告 UI Router
大家的视图需求显示到哪儿。这里大家利用 Bootstrap 来异常的快利用样式。

当使用ui-sref时,你要连选取你路由中定义的state实际不是U讴歌RDXL。然后Angular会使用这一个来为您创设href。

让大家从新建form.html开首。那些文件将会在我们剩下的表单视图像和文字件中当作模板的法力,正如index.html被视作整个项指标一体化模板一样。大家所要作的是在该文件中含有ui-view,那样能够使嵌套评释知道该在哪儿注入他们的视图。

基础Stylingstyle.css

如上所述是小编给咱们大饱眼福的AngularJS 使用 UI Router
达成表单向导的连锁文化,希望对我们享有助于。

让我们言归正传,起头创立大家的最好的表单!

 Name  Email   Next Section  

如今截止,我们并不曾完全依据期待的那样获得全部的剧情,不过那是一各类伟大事情的始发。让大家继续上扬,增多一点体制,之后会加多一些放松权利视图和注释。

累加依照状态的激活类

小编们透过树立二个主文件来引进大家所必要的有所财富以开端大家的体系,这里大家接纳 index.html 文件作为主文件

form 将是咱们的主视图区域。它雷同有叁个以 . 分割的子视图区域
form.profile。这种主见能实现在运用状态产生变化时(译者:恐怕是路由、queryString等),子视图将会在主视图区域中显得出来。(译者:何况能够作到仅更新子视图区域变化,记录子视图区域情状)。

大家愿意每二个地方按键能够在他们被激活时突显。为了完毕这些职能,大家将会采纳UI
Router提供的ui-sref-active。假使ui-sref和脚下情状同样,则会增添大家钦点的类。

以后,你大概想清楚我们的表单终究看起来是怎么着体统。让我们开采浏览器看一眼。

近年来我们具有做的正是经过体制形成大家最后的表单。为了知道Angular动画,那篇小说是一个很好的起源。

因为在类型发轫的时候,大家曾经加载了ngAnimate,它已经增多到需求动漫的的类上了。当视图步向或退出的时候,它将自行增多类ng-enter和ng-leave。

以往我们来成立应用和路由。 在三个大型应用中,
你鲜明希望把你的Angular应用、路由、调节器分布到它们分别的模块中,不过为了成功大家的简要用例,大家将把它们都放到app.js这些兴奋的大家庭中。

上面是大家表单最近的每一个页面。

咱俩的布局/模板文件 index.html

说不上,应用大家的动漫片到.ng-enter和.ng-leave类

相关文章

发表评论