我们看到这项技术已经应用在了许多的网页上。比如购物车,注册表单,入职流程以及许多多步表单,让用户更容易在线填写表单。
下面我们将构建它:
使用UI Router,它能内嵌状态,为每个状态显示不同的view,我们能让多步表单变得相当的容易。
为了快速的理解UI Router是怎样工作的,看我们的文章:AngularJS使用UI-Router路由
让我们言归正传,开始创建我们的最棒的表单!
创建工程
创建工程有个模板结构. 需要个 布局文件,每个表单的视图文件,格式文件,以及JavaScript 文件.
每个表单-____.html表示层级结构中的html文件. 这些结构最终创建我们的表单结构.
我们的布局/模板文件 index.html
我们通过建立一个主文件来引入我们所需要的所有资源以开始我们的项目 ,这里我们使用 index.html 文件作为主文件
现在,我们加载我们所需的资源(AngularJS,ngAnimate,Ui Router,以及其他脚本和样式表)并且设定一个 ui-view用来告知 UI Router 我们的视图需要显示到哪里。这里我们使用 Bootstrap 来快速应用样式。