angularjs - How to correctly implement multiple views with UI Router in Angular? -

i'm trying implement site 2 main content 'panes' (imagine 2 columns each half width of page). panes should able change independent of each other , have own controllers , able pass data between each other (so user can navigate through bunch of pages on left pane while right pane stays same without reloading , vice versa, , change in left pane can update data showing in right pane).

i've looked through bunch of examples/tutorials on ui router can't seem find example of how implement i'm trying do. of them seem show either examples single nested views (so single view within larger view) or show multiple views not how change views independent of each other.

i'd single <div ui-view></div> in index.html file (as opposed multiple ui-views) can have happening within single parent ui-view , not in index.html file.

right have following js file:

config(['$stateprovider', '$urlrouterprovider', function($stateprovider, $urlrouterprovider) {       $urlrouterprovider.otherwise('/home');       $stateprovider       .state('home', {             url: '/home',             views: {                 '': { templateurl: 'views/home.html' },                 'left@home': {                    templateurl: 'views/charting/charthome.html',                 },                 'right@home': {                      templateurl: 'views/view1.html',                     controller: 'view1ctrl'                 }             }          });     }]); 

and following html home.html:

<div>     <h1>this home</h1> </div> <div ui-view='left'> </div> <div ui-view='right'> </div> 

can this? or wrong way thinking site? if should doing?

thanks!

this pretty complicated solve ui-router.

i've created fiddle give ui-router nested states try. works gettting ugly quickly.

it works this: home.main.left route changes left view , uses right view home.main. better have both view states independent each other i'm not sure how ui-router.

i think better use ui-router navigation of left part , use custom directive right part (or other way round). communicate directive can use $emit/$broadcast.

changing route of left part possible directive links ui-sref or $state.go(...) method.

please have @ demo below or in jsfiddle.

angular.module('demoapp', ['ui.router'])  .config(['$stateprovider', '$urlrouterprovider', function($stateprovider, $urlrouterprovider) {        $urlrouterprovider.otherwise('/home');        $stateprovider        .state('home', {            templateurl: 'views/home.html',            abstract: true        })        .state('home.main', {              url: '/home',              templateurl: 'views/charting/charthome.html',            	controller: 'leftctrl'          })        .state('home.left', {              template: 'home.left <a href="#" ui-sref="home.left1">left1 change</a><br/>{{hello}}',            controller: 'leftctrl'                      })        .state('home.left1', {              template: 'home.left1 <a href="#" ui-sref="home.left2">left2 change</a>'          })        .state('home.left2', {              template: 'home.left2 <a href="#" ng-click="triggerdirective()">change directive</a>',            controller: function($scope) {            	$scope.triggerdirective = function() {              	console.log('do directive action');                  $scope.$emit('rightcontent:changemsg', 'new content');                  // emit rootscope because rightcontent not child of leftcontent              };            }          })                      }])  .directive('rightcontent', function() {  	return {      	restrict: 'ea',          template: 'some static content or other stuff directive. <strong>{{message}}</strong>',          controller: function($scope, $rootscope) {              $scope.message = 'hello directive.';          	$rootscope.$on('rightcontent:changemsg', function(evt, message) {                  console.log(message);              	$scope.message = message;              });          }      }  })  .controller('leftctrl', function($scope){            $scope.hello = 'hello left';  })  .controller('appcontroller', function($scope) {  });

.left {      float: left;      width: 50%;      height: 200px;      background: lightgreen;  }      .right {      float: right;      width: 50%;      height: 200px;      background: lightgray;  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>    <div ng-app="demoapp" ng-controller="appcontroller">      <script type="text/ng-template" id="views/home.html">          <div>              <h1>this home</h1>          </div>          <div class="wrapper">              <div ui-view="" class="left">              </div>              <div class="right">                  <right-content></right-content>              </div>              <a href="#" ui-sref="home.main">home</a>          </div>      </script>      <script type="text/ng-template" id="views/charting/charthome.html">          left {{hello}}          <a href="#" ui-sref="home.left">left change</a>      </script>      <script type="text/ng-template" id="views/view1.html">          right {{hello}}      </script>            <div ui-view=""></div>  </div>