位置: 编程技术 - 正文

使用AngularJS实现表单向导的方法(angular.js)

编辑:rootadmin

推荐整理分享使用AngularJS实现表单向导的方法(angular.js),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:angularjs $q,angularjs4,angular keyup,angular keyup,angularjs4,angularjs4,angularjs4,angular jsx,内容如对您有帮助,希望把文章链接给更多的朋友!

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

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

下面我们将构建它:

使用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 来快速应用样式。

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

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

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

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

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

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

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

添加基于状态的激活类

使用AngularJS实现表单向导的方法(angular.js)

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

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

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

基础Stylingstyle.css

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

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

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

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

表单兴趣视图

表单支付视图

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

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

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

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

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

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

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

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

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

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

举例详解AngularJS中ngShow和ngHide的使用方法 今天我们来看看怎样使用Angular的ngShow和ngHide指令来完成它们听起来应该完成的,显示和隐藏!它们应该做的事ngShow和ngHide允许我们显示或隐藏不同的元

使用AngularJS实现可伸缩的页面切换的方法 AngularJS1.2通过引入基于纯CSSclass的切换和动画,在一个单页面应用创建页面到页面的切换变得更加的容易。只需要使用一个ng-view,让我们来看一下,一

使用AngularJS创建单页应用的编程指引 概述单页应用现在越来越受欢迎。模拟单页应用程序行为的网站都能提供手机/平板电脑应用程序的感觉。Angular可以帮助我们轻松创建此类应用简单应用

标签: angular.js

本文链接地址:https://www.jiuchutong.com/biancheng/380443.html 转载请保留说明!

上一篇:测试IE浏览器对JavaScript的AngularJS的兼容性(浏览器app测试要点)

下一篇:举例详解AngularJS中ngShow和ngHide的使用方法(举例详解民法典第994条)

  • 自然人电子税务局
  • 应交个人所得税计提分录
  • 汽车租赁企业
  • 企业所得税季度预缴怎么计算
  • 预提车间租入固定资产租金800元
  • 购货方跨年红冲发票会计分录
  • 购入库存商品未付款怎么做账
  • 盘盈存货会计处理会计分录
  • 佣金是否要交所得税
  • 房租发票一下全部开出
  • 开了零税率的发票怎么办
  • 反写状态已反写是什么意思
  • 注销税务财务报表模板
  • 合并后的新企业有哪些
  • 外购库存商品
  • 一般纳税人简易计税会计分录
  • 委托加工物资成本计入
  • linux对硬件的要求
  • symtray.exe - symtray是什么进程 有何作用
  • 家常煲汤500例的做法窍门
  • 怎么跟银行谈停息挂账
  • php中常用的数组是什么
  • 关闭密码保护共享后又自动开启
  • yii2.0实现验证用户名与邮箱功能
  • 微软win11预览版
  • 谷歌浏览器历史记录插件
  • 项目中的问题
  • 小规模纳税人避税
  • 附加税退税申请理由模板
  • webpack与gulp面试题
  • chatb
  • ai技术排名
  • umount命令详解
  • uni app ios
  • 增值税怎么算出来的
  • 视同销售在纳税明细表中怎么填
  • 企业购买商铺会查征信吗
  • 生产企业免抵退是什么意思
  • sql查询结果分页
  • 打开access自动弹出窗体
  • sql server2005怎么打开
  • 期初余额调整怎么做凭证
  • 资产负债表中应收账款的计算公式
  • 企业缴纳印花税时需要
  • 暂估商品入库 后收到发票怎么做分录
  • 预支差旅费怎么记账
  • 采购的样品没有发票怎么入账
  • 应交税费包括哪些科目
  • 一次性伤残就业补助金怎么领取
  • 主营业务成本带二级科目吗
  • 发行长期债券计入什么科目
  • 没有报关单可以出口吗
  • 系统多交税款放在哪里
  • 投资收益怎么做帐
  • mysql5.7对应的jdbc
  • mysql jsonb
  • ubuntu20.04.1安装
  • linux给root权限
  • windows8自动更新在哪里关闭
  • 苹果系统数据怎么清掉
  • 系统更新win10
  • mac如何修改用户名称
  • win8设置在哪
  • linux下4种kill某个用户所有进程的方法
  • 红帽linux6.0安装教程
  • windows8.1关机在哪
  • win10双击应用程序没反应
  • js数组常用的方法及用法
  • pycharm新手使用教程
  • node.js中的http.response.write方法使用说明
  • python 数据结构 算法
  • javascript怎么学
  • 平谷大集时间表2022
  • 税控开票软件里的汇总怎么弄
  • 重庆市税收排名地区
  • 江西省电子税务局公众查询
  • 广州地税局官网办事点
  • 中药生产与加工和中药制药技术区别
  • 长沙房产税如何征收
  • 请问在哪里可以看到
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设