UIルータネストされたビュー

Question

私は運が無ければ様々なアンワーサーと試しました。

私はこの2 UI-のビューがあります。

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

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

をそして、これは私のルーティングです：

$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' 
        } 
       }   
      }) 

私はビューに名前を入れて、さまざまな方法が、クライアントでそれらを呼び出して試してみました。ルートURLが変更されてもhtmlは表示されません。

Answer 1

$stateProviderで使用しているビューの構文に完全に慣れていません。私はあなたに2つのバージョンを与えます、最初はあなたの例に非常に類似しているように見えます、そして、2つ目はベストプラクティスにもっと整列します。

$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' 
     }) 

ベストプラクティスのバージョン：

(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); } 
    }) 
} 
})();