Ui-route More than one view

Question

Hello, I work with angular, and I’m using UI-ROUTE I’m trying to put two views on the same page and n with you. Here’s how I want the views to appear:

When I click on "My registration data" it is for it to display on the right side the info of the html page of registration data.

here are the codes.

HTML

<div class="jumbotron" style="text-align:center; margin-top: 20px"><h3>Perfil</h3></div>

  <div class="container">
<div class="row">
    <div class="col-sm-3">
        <div class="sidebar-navi">
            <div class="navbarmenu navbar-default" role="navigation">

                    <ul class="navmenu">
                        <li><a ui-sref="dadosPerfil">Meus dados cadastrais</a></li>
                        <li><a ui-sref="enderecoPerfil">Meus endereços</a></li>
                        <li><a href="#">Meus dados de acesso</a></li>
                        <li><a href="#">Meus pedidos</a></li>
                    </ul>

            </div>
        </div>
    </div>

    <div ui-view="dadosPerfilCadastro"></div>

    <div ui-view></div>

</div>

ROUTES

.state('perfil', {
            url: "/users/perfil",
            controller: 'PerfilCtrl',
            controllerAs: 'vm',
            templateUrl: 'pages/account/perfil.html'
        })
        .state('dadosPerfil', {
            url: "/users/perfil/dadosPerfil",
            views: {
                '': {
                    controller: 'PerfilCtrl',
                    controllerAs: 'vm',
                    templateUrl: 'pages/account/perfil.html'
                },
                'dadosPerfilCadastro': {
                    controller: 'PerfilCtrl',
                    templateUrl: 'pages/account/perfilDados.html'
                },
            }
        });

Answer 1

Biellx, use the ui-router Nested Views.

Example:

var app = angular.module('app', ['ui.router']);

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

        // For any unmatched URL redirect to dashboard URL
        $urlRouterProvider.otherwise("/index");

  		 // Views targeting:
  		 // # relatively 	
        //  - my-view : 				 relatively target 'my-view' in parent state.
    	  //  - "" : 						relatively targets the unnamed view in parent state.
  		 // # absolutely views
    	  //  - my-view@ : 			  absolutely target 'my-view' in root. 
  		 //  - my-view@my-state :   absolutely target 'my-view' in my-state's view.	
  		 //  - @my-state: 		     absolutely target unnamed view in my-state's view.
  		 //  - @:  						 absolutely targets the unnamed view in root unnamed state.
  
  		 // Recommended, use always views and states names (only root is unnamed):
    	 // # relatively 	
        //  - my-view : 				 relatively target 'my-view' in parent state.
  		 // # absolutely views
  		 //  - my-view@my-state :   absolutely target 'my-view' in my-state's view.	
        //  - my-view@ : 			  absolutely target 'my-view' in root. 
        $stateProvider
        
            // index
            .state('index', {
                url: "/index",
                views: {
                    'menu-view': {
                       templateUrl:"menu.html"
                    },
                    'container-view': {
                     	templateUrl:"home.html"
                    },
                        'left-view@index' :{
                           templateUrl:"departures.html"
                        },
                        'right-view@index' :{
                           templateUrl:"arrivals.html"
                        },
                   'status-view': {
                       template:"<p>index<p>"
                    },
                },
            })
         	
        	  // departures
            .state('departures', {
                url: "/departures",	
                views: {
                    'menu-view': {
                       templateUrl:"menu.html"
                    },
                    'container-view': {
                     	templateUrl:"departures.html"
                    },
                   'status-view': {
                       template:"<p>departures<p>"
                    },
                },
            })
        
          	// departures, add substate 
            .state('departures.add', {
                url: "/add",	
                views: {
                    'bottom-view@departures': {
                       templateUrl:"departures.add.html"
                    },
                    'status-view@': {
                       template:"<p>departures.add<p>"
                    },
                },
            }) 
        
        		// departures, list substate 
            .state('departures.list', {
                url: "/list",	
                views: {
                    'bottom-view@departures': {
                       templateUrl:"departures.list.html"
                    },
                    'status-view@': {
                       template:"<p>departures.list<p>"
                    },
                },
            }) 
        
            // arrivals
            .state('arrivals', {
                url: "/arrivals",
                views: {
                    'menu-view': {
                       templateUrl:"menu.html"
                    },
                    'container-view': {
                     	templateUrl:"arrivals.html"
                    },
                   'status-view': {
                       template:"<p>arrivals<p>"
                    },
                },
            }) 
        
            // arrivals, add substate 
            .state('arrivals.add', {
                url: "/add",	
                views: {
                    'bottom-view@arrivals': {
                       templateUrl:"arrivals.add.html"
                    },
                   'status-view@': {
                       template:"<p>arrivals.add<p>"
                    },
                },
            }) 
        
        		// arrivals, list substate 
            .state('arrivals.list', {
                url: "/list",	
                views: {
                    'bottom-view@arrivals': {
                       templateUrl:"arrivals.list.html"
                    },
                   'status-view@': {
                       template:"<p>arrivals.list<p>"
                    },
                },
            }) 
    });

.container {
   background-color: #f1f1f1;  
}

<html>
  <head>
    <meta charset="utf-8">
    
    <title>AngularJS - Nested views</title>
    
    <!--Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    
    <!--JAquery-->
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
    
    <!--Angular JS-->
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular.min.js"></script>
    <!--Angular JS - UI Router-->
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.11/angular-ui-router.min.js"></script>
    <!--Angular JS - Bootstrap-->
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap-tpls.min.js"></script>
    <!--Bootstrap Javascript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
    
  </head>
  
<body ng-app="app">

    <!--Angular view injection-->
    <div class="container">
      <div class="row">
        <div ui-view="menu-view" class="col-md-2"></div>         
        <div ui-view="container-view" class="col-md-10"></div>
      </div>
    
      <div class="pull-right">
          <div style="width: auto; float:left; margin-right:10px">status:</div>
          <strong style="width: auto; float:left;" ui-view="status-view"> </strong>
      </div>
    </div>

  	<!--
 	########################
 	###   Partial views   ##
	 ######################## -->
    
   <!-- menu -->
   <script id="menu.html" type="text/ng-template">
     <div class="alert alert-info">
        <h3><a ui-sref="index">home</a></h3>
        <h3><a ui-sref="departures">departures</a></h3>
        <h3><a ui-sref="arrivals">arrivals</a></h3>
     </div>
   </script>
  
  <!-- home -->
   <script id="home.html" type="text/ng-template">
     <h3>home</h3>
     <div ui-view="left-view" class="col-md-6"></div>
     <div ui-view="right-view" class="col-md-6"></div>
   </script>
  
   <!-- departures -->
   <script id="departures.html" type="text/ng-template">
   	<div class="alert alert-warning">
       <strong>departures</strong>
       <h5><a ui-sref="departures.add">add new</a></h5>
       <h5><a ui-sref="departures.list">view list</a></h5>
      
       <div style="background:white">
           <div ui-view="bottom-view"></div>   
       </div>
      
      </div>
   </script>
  
   <!-- add departures -->
   <script id="departures.add.html" type="text/ng-template">
        create new departure<input type=text/>
   </script>
  
   <!-- list departures -->
   <script id="departures.list.html" type="text/ng-template">
      <ul>
        <li>departure 1</li>
        <li>departure 2</li>
        <li>departure 3</li>
      </ul>
   </script>
  
   <!-- arrivals -->
   <script id="arrivals.html" type="text/ng-template">
      <div class="alert alert-success">
       <strong>arrivals</strong>
       <h5><a ui-sref="arrivals.add">add new</a></h5>
       <h5><a ui-sref="arrivals.list">view list</a></h5>
        
       <div style="background:white">
           <div ui-view="bottom-view"></div>   
       </div>
        
      </div>
   </script>
  
   <!-- add arrival -->
   <script id="arrivals.add.html" type="text/ng-template">
        create new arrival<input type=text/>
   </script>
  
   <!-- list arrivals -->
   <script id="arrivals.list.html" type="text/ng-template">
      <ul>
        <li>arrival 1</li>
        <li>arrival 2</li>
        <li>arrival 3</li>
      </ul>
   </script>
   
</body>
</html>

https://github.com/angular-ui/ui-router/wiki/nested-states-%26-nested-views