angular 路由中的多视图

### 主模版
<ul class="nav nav-pills" role="tablist">
          <li auto-focus role="presentation"  class="active"><a href="#/cateList/cateList1">cate1</a></li>
          <li auto-focus role="presentation" ><a href="#/cateList/cateList2">cate2</a></li>
          <li auto-focus role="presentation" ><a href="#/cateList/cateList3">cate3</a></li>

    </ul>

    <div ui-view="cateList1"></div>
    <div ui-view="hotGoods1"></div>
    <!--此处是多视图的dom元素  此元素在非激活状态（路由不匹配）下是隐藏的      -->
  <div class="table-responsive" ui-view="">

  </div>

### config
 .state("cateList.cateList3", {
            url:'/cateList3',
//          templateUrl:"./views/cateList3.html",
            views: {
                'cateList1': {
                    template: '<h4>Filter inbox11{{data1}}</h4>',
                    controller: function($scope) {
                        $scope.data1=11222;
                    }
                },
                'hotGoods1': {
                    template: '<h4>Filter inbox11{{data2}}</h4>',
                    controller: function($scope) {
                        $scope.data1=333444;
                    }
                }
             },
        })

视图元素是卸载主模版上的 这一点一样要注意，主模版存在多种路由状态 本例子就存在 三种状态 cateLIst1 2 3 ,在cateList1 2 的情况下 视图元素是隐藏的，在cateList3状态下 元素是显示的 所以 有一点一定要注意 cateList3 状态下 没有自己的模版 该状态下的模版是在主模版上的