我们看到这项技术已经应用在了许多的网页上。比如购物车，注册表单，入职流程以及许多多步表单，让用户更容易在线填写表单。
下面我们将构建它：
使用UI Router，它能内嵌状态，为每个状态显示不同的view,我们能让多步表单变得相当的容易。
为了快速的理解UI Router是怎样工作的，看我们的文章：AngularJS使用UI-Router路由
让我们言归正传，开始创建我们的最棒的表单！
创建工程
创建工程有个模板结构. 需要个 布局文件 , 每个表单的视图文件, 格式文件, 以及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 来快速应用样式。
<!-- index.html --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- CSS --> <link href="https://netdna.bootstrapcdn.com/bootswatch/3.1.1/darkly/bootstrap.min.css"> <link href="https://www.jb51.net/style.css"> <!-- JS --> <!-- load angular, nganimate, and ui-router --> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.min.js"></script> <script src="https://www.jb51.net/article/app.js"></script> </head> <!-- apply our angular app --> <body ng-app="formApp"> <div> <!-- views will be injected here --> <div ui-view></div> </div> </body> </html>
完成所有文件的引入后，让我们进入 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开始。这个文件将会在我们剩下的表单视图文件中充当模板的作用，正如index.html被用作整个项目的总体模板一样。我们所要作的是在该文件中包含ui-view，这样可以使嵌套声明知道该在何处注入他们的视图。
<!-- form.html --> <div> <div> <div> <div> <h2>Let's Be Friends</h2> <!-- the links to our nested states using relative paths --> <!-- add the active class if the state matches our ui-sref --> <div> <a ui-sref-active="active" ui-sref=".profile"><span>1</span> Profile</a> <a ui-sref-active="active" ui-sref=".interests"><span>2</span> Interests</a> <a ui-sref-active="active" ui-sref=".payment"><span>3</span> Payment</a> </div> </div> <!-- use ng-submit to catch the form submission and use our Angular function --> <form ng-submit="processForm()"> <!-- our nested state views will be injected here --> <div ui-view></div> </form> </div> <!-- show our formData as it is being typed --> <pre> {{ formData }} </pre> </div> </div>