ui-view AngularJs multiple views

Question

私はui-roterを使用しています。私は2つのグループのページを持っています。グループAおよびグループBである。各グループにおいて、headerおよびfooterが繰り返されるが、contentが変更される。どのように私は各グループのヘッダーとフッターを繰り返さないようにすることができますか？コードを簡単にする方法はありますか？変数を試してくださいが、それは私のためにはうまくいかなかった。

私のindex.html

<div ui-view="header"></div> 
<div ui-view="content"></div> 
<div ui-view="footer"></div> 

グループA

$stateProvider 
 
     .state('inicio', { 
 
      url: '/inicio', 
 
      views: { 
 
       'header': {templateUrl: 'views/header.html'}, 
 
       'content': {templateUrl: 'views/inicio.html'}, 
 
       'footer': {templateUrl: 'views/footer.html'} 
 
      } 
 
     }); 
 

 
    $stateProvider 
 
     .state('seguroPersonas', { 
 
      url: '/seguroPersonas', 
 
      views: { 
 
       'header': {templateUrl: 'views/header.html'}, 
 
       'content': {templateUrl: 'views/seguroPersonas.html'}, 
 
       'footer': {templateUrl: 'views/footer.html'} 
 
      } 
 
     }); 
 

 
    $stateProvider 
 
     .state('seguroEmpresas', { 
 
      url: '/seguroEmpresas', 
 
      views: { 
 
       'header': {templateUrl: 'views/header.html'}, 
 
       'content': {templateUrl: 'views/seguroEmpresas.html'}, 
 
       'footer': {templateUrl: 'views/footer.html'} 
 
      } 
 
     });

グループB

$stateProvider 
 
     .state('dashboard', { 
 
      url: '/dashboard', 
 
      views: { 
 
       'header': {templateUrl: 'views/dashboard/headerDashboard.html'}, 
 
       'content': {templateUrl: 'views/dashboard/inicioDashboard.html'}, 
 
       'footer': {templateUrl: 'views/dashboard/footerDashboard.html'} 
 
      } 
 
     }); 
 

 
    $stateProvider 
 
     .state('clientesPotenciales', { 
 
      url: '/dashboard/clientesPotenciales', 
 
      views: { 
 
       'header': {templateUrl: 'views/dashboard/headerDashboard.html'}, 
 
       'content': {templateUrl: 'views/dashboard/clientesPotenciales.html'}, 
 
       'footer': {templateUrl: 'views/dashboard/footerDashboard.html'} 
 
      } 
 
     }); 
 

 
    $stateProvider 
 
     .state('seguroEmpresas', { 
 
      url: '/seguroEmpresas', 
 
      views: { 
 
       'header': {templateUrl: 'views/dashboard/headerDashboard.html'}, 
 
       'content': {templateUrl: 'views/dashboard/actualizacionDatos.html'}, 
 
       'footer': {templateUrl: 'views/dashboard/footerDashboard.html'} 
 
      } 
 
     });

Answer 1

あなたのページには、二つの高レベルの状態があります。AとBは、それはそれを反映するためにあなたの状態構成のための良いアイデアです。第2に、ui-routerは、静的なすべてのコンテンツを認識する必要はありません（状態の中で変わらない）。

あなたはこのような構造を探しています：

index.htmlを

<header-a></header-a> 
<ui-view></ui-view> 
<footer-a></footer-a> 

同じ

<ui-view></ui-view> 

a.htmlはb.html

のために行きます

Tアイデアは、あなたがそれらの中であなたの二つのグループ、AとBの間で変化するトップレベルの状態を、持っていること、である

var aState = { 
    url: '/a', 
    templateUrl: 'path/to/a.html' 
} 

var inicioState = { 
    url: '/a/inicio', 
    templateUrl: 'views/inicio.html' 
} 

... 

var bState = { 
    url: '/b' 
    templateUrl: 'path/to/b.html' 
} 

... 

$stateProvider 
     .state('a', aState) 
     .state('a.inicio', inicioState) 
     .state('b', bState) 
... 

、あなたが持っているだろう。彼は、このようになります状態構成を持つファイル静的ヘッダーとフッター（例えば、角度方向の指示として）、およびそれらの間の動的コンテンツがネストされた状態で提供されます。これで、htmlファイルに1つの<ui-view>タグがあるので、暗黙的に名前の付いたビューは必要ありません。また、$stateProviderは、state()コールをチェーンすることができます。この方法では、定型文を失う可能性があります。

また、URLの命名規則の適切な実践は、あなたの州の階層に従うことです。たとえば、状態clientesPotencialesには、'/dashboard/clientesPotenciales'というURLがあり、ネストされた状態はdashboardであることを示します。実際には、彼らは同じレベルにとどまっています。ネストされていない場合は、'/clientesPotenciales'にURLを変更するか、または状態名をdashboard.clientesPotencialesに変更する必要があります。

Answer 2

AngularJSという名前のコンポーネントのリソースを使用することができます。これは1.5バージョンでリリースされたもので、特別な種類の指示文で、html要素の省略形です。これにより、フッターとヘッダーを再利用できます。

公式ドキュメント：https://docs.angularjs.org/guide/component

例：

(function() { 
    'use strict'; 

    angular.module('yourApp') 
     .component('headerCard', { 
      templateUrl: 'your-path/header-card.html', 
      controller: headerCardCtrl, 
      controllerAs: 'vm', 
      bindings: { 
      } 
     }); 

    function headerCardCtrl() { 
     var vm = this; 

     // Your logic 

    } 

})(); 

お使いのコントローラテンプレートで、あなたはこのように使用：無知のために残念

<header-card></header-card>