具有多个视图的UI路由器

Question

我正在尝试学习AngularJS中的UI-Routing

我有两个观点。 1 GT;默认值为2＆gt;单击按钮时。

我已经编辑了我的代码以使用多个视图，但这似乎不起作用。我确信代码不完美，但我找不到。

任何帮助将不胜感激。

代码：

HTML（指数）

我暂时将所有业务都集中在一个控制器中。

<div class="channels" ng-controller = "MainController">

  <div class="container-fluid">
    <div class="row-fluid">

      <div class="col-xs-4">
        <div class="container2">
          <div class="channel_title container_title"> Channels </div>
            <channel-tab
              ........>
            </channel-tab>
        </div>
      </div>

      <div class="col-xs-4" >
        <div class="container3">
          <div class="source_title container_source"> Sources </div>
          <div ui-view='DefaultSources' ></div>
        </div>
      </div>

      <div class="col-xs-4">
        <div class="container4">
          <div class="keyword_title container_keyword"> Keywords </div>
          <div ui-view='DefaultKeywords'></div>
        </div>
      </div>

    </div>
  </div>

路线

angular.module('myApp').config(["$stateProvider", "$httpProvider", "$urlRouterProvider", function($stateProvider,$httpProvider,$urlRouterProvider){

$urlRouterProvider.otherwise('/');
$stateProvider.state('One',{
    views: {
      'DefaultSources@One':{
        url:'/Default_View',
        templateUrl:'/static/app/recommender_service/template/default_sources.html'
      },
      'DefaultKeywords@One':{
        url:'/Default_View',
        templateUrl:'/static/app/recommender_service/template/default_keyword.html'
      }
    }
})
}]).run(["$state", "$rootScope", function($state, $rootScope){
$rootScope.$state = $state;
}]);