form 将是我们的主视图区域。它同样有一个以 . 分割的子视图区域 form.profile。这种想法能实现在应用状态发生变化时（译者：可能是路由、queryString等），子视图将会在主视图区域中显示出来。（译者：而且可以作到仅更新子视图区域变化，记录子视图区域状态）。
我们将在下一节中进行演示。 现在我们需要为form以及它的子视图区域创建视图。
表单模板视图 form.html
让我们从新建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>
注意我们是如何第二次在项目中使用ui-view的。这就是UI Router伟大的地方：我们可以嵌套声明和视图。这能够在我们开发应用时提供给我们非常多的灵活性。关于UI Router视图的内容，请参见。
添加基于状态的激活类
我们希望每一个状态按钮能够在他们被激活时展示。为了达到这个效果，我们将会使用UI Router提供的ui-sref-active。如果ui-sref和当前状态一致，则会添加我们指定的类。
现在，你可能想知道我们的表单究竟看起来是什么样子。让我们打开浏览器看一眼。
目前为止，我们并没有完全按照希望的那样得到所有的内容，但是这是一系列伟大事情的开端。让我们继续前进，添加一点样式，之后会添加一些嵌入视图和注释。
基础Stylingstyle.css
我们将设计我们的form-container和status-buttons来是我们的表单看起来更好。
/* 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; }
现在我们的按钮更好看了并且更符合我们想要的了，接下来我们看下嵌套视图。
嵌套视图form-profile.html, form-interests.html, form-payment.html
这部分会比较简单。我们将定义不同的带有我们需要的输入框的视图。并且将他们绑定到formData对象以便我们能看到输入的数据。
下面是我们用于嵌套视图的视图文件：
表单概要视图
<!-- form-profile.html --> <div> <label for="name">Name</label> <input type="text" ng-model="formData.name"> </div> <div> <label for="email">Email</label> <input type="text" ng-model="formData.email"> </div> <div> <div> <a ui-sref="form.interests"> Next Section <span></span> </a> </div> </div>
表单兴趣视图
<!-- form-interests.html --> <label>What's Your Console of Choice?</label> <div> <div> <label> <input type="radio" ng-model="formData.type" value="xbox" checked> I like XBOX </label> </div> <div> <label> <input type="radio" ng-model="formData.type" value="ps"> I like PS4 </label> </div> </div> <div> <div> <a ui-sref="form.payment"> Next Section <span></span> </a> </div> </div>
表单支付视图
<!-- form-payment.html --> <div> <span></span> <h3>Thanks For Your Money!</h3> <button type="submit">Submit</button> </div>
既然我们已经定义了这些视图，那么当我们浏览表单时，他们就会显示出来。同样我们用下一个按钮和ui-sref来连接每一个新视图.
当使用ui-sref时，你要连接到你路由中定义的state而不是URL。然后Angular会使用这个来为你构建href。
下面是我们表单目前的每一个页面。
为了让我们的页面不同寻常，让我们加上动画效果。
让我们的表单产生动画效果
因为在项目开始的时候，我们已经加载了ngAnimate，它已经添加到需要动画的的类上了。当视图进入或退出的时候，它将自动添加类ng-enter和ng-leave。
现在我们所有做的就是通过样式形成我们最终的表单。为了理解Angular动画，这篇文章是一个很好的起点。
让我们进去css文件，将动画，并应用到我们的表单上