（4）接下来，我们添加一些子模板。这些模板将会插入它们的父模板的ui-view。

List of State 1 Items

  ` item `

List of State 2 Things

  ` thing `

（5）最后，我们用$stateProvider来把所有的state连成一条线，像下面这样设置你的状态：

myApp.config(function($stateProvider, $urlRouterProvider) {

  //

  // For any unmatched url, redirect to /state1

  $urlRouterProvider.otherwise("/state1");

  //

  // Now set up the states

  $stateProvider

   .state('state1', {

    url:"/state1",

    templateUrl:"partials/state1.html"

   })

   .state('state1.list', {

    url:"/list",

    templateUrl:"partials/state1.list.html",

    controller:function($scope) {

     $scope.items= ["A", "List", "Of", "Items"];

    }

   })

   .state('state2', {

    url:"/state2",

    templateUrl:"partials/state2.html"

   })

   .state('state2.list', {

    url:"/list",

    templateUrl:"partials/state2.list.html",

    controller:function($scope) {

     $scope.things= ["A", "Set", "Of", "Things"];

    }

   });

});

这些只是一些简单的使用，具体的我们可以根据自己的需要改动。

例二、多个的命名视图

这是ui-router的另一个强大的功能，可以在一个模板页面中有多个ui-view。

（1）首先完成上边准备工作的设置

（2）添加一个或多个ui-view到你的应用并命名好。