UI Router verschachtelte Ansichten

Question

Ich habe mit verschiedenen Anwsers ohne Glück versucht.

Ich habe diese zwei ui-Ansichten:

<div ui-view class="expand"></div> //Inside index.html 

<div ui-view></div> //Inside home.html 

Und das ist mein Routing:

$stateProvider 
      .state('home', { 
       url: '/', 
       views: { 
        '@': { 
         templateUrl: 'app/components/home/home.html', 
         controller: 'HomeCtrl' 
        } 
       } 
      }) 
      .state('clients', { 
       url: '/clients', 
       views: { 
        '@home': { 
         templateUrl: 'app/components/clients/clients.html', 
         controller: 'ClientsCtrl' 
        } 
       }   
      }) 

Ich habe versucht, Namen für die Ansicht und rufen sie auf unterschiedliche Weise, aber Kunden setzen. html wird nie angezeigt, obwohl sich die Routen-URL ändert.

Answer 1

Ich bin nicht vollständig vertraut mit der Ansichtssyntax, die Sie mit $stateProvider verwenden. Ich gebe Ihnen zwei Versionen, die erste wird Ihrem Beispiel sehr ähnlich sein und die zweite ist mehr mit Best Practices abgestimmt.

$stateProvider 
     .state('base', { 
      abstract: true, 
      url: '', 
      templateUrl: 'views/base.html' 
     }) 
     .state('login', { 
      url: '/login', 
      parent: 'base', 
      templateUrl: 'views/login.html', 
      controller: 'LoginCtrl' 
     }) 
     .state('dashboard', { 
      url: '/dashboard', 
      parent: 'base', 
      templateUrl: 'views/dashboard.html' 
     }) 

Best Practice Version:

(function() { 
'use strict'; 
angular 
    .module('app.core') 
    .config(stateConfig) 
    .run(errorHandler); 

stateConfig.$inject = ['$stateProvider', '$urlRouterProvider', '$locationProvider']; 
getZipCodes.$inject = ['googleMapService']; 
errorHandler.$inject = ['$rootScope', 'logger']; 

function stateConfig($stateProvider, $urlRouterProvider, $locationProvider) { 
    $locationProvider.html5Mode(true); 
    $urlRouterProvider.otherwise('/'); 

    $stateProvider.state('core', { 
     url: '/', 
     templateUrl: 'app/core/core.html', 
     controller: 'CoreController', 
     controllerAs: 'vm', 
     resolve: { 
      getZipCodes : getZipCodes 
     } 
    }) 
} 

/** @desc: Ping the back-end for a JSON object that will be converted into an array of NYC zip codes */ 
function getZipCodes(googleMapService) { 
    return googleMapService.getZipCodes(); 
} 

/** @desc: $stateChangeError handler */ 
function errorHandler($rootScope, logger) { 
    $rootScope.$on('$stateChangeError', function (error, event) { 
     if (error) { logger.error('Error while changing states', error); } 
     if (event) { logger.error('The event that caused the error', event); } 
    }) 
} 
})();