ui-view AngularJs多视图

Question

我正在使用ui-roter。我有两组页面。组A和组B.在每组中，重复header和footer但是content改变。我怎么能不重复每个组的页眉和页脚？有没有办法让代码更简单？尝试一个变量，但它不适合我。

我的index.html

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

甲组

$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这对你的状态配置以反映一个好主意。其次，ui-router不必知道所有静态内容（如在状态中不会改变）。

您正在寻找这样的结构：

的index.html

<ui-view></ui-view> 

a.html

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

也是一样b.html

T然后他与国家配置文件将是这个样子：

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) 
... 

的想法是，你有一个顶级的状态，你的两组，A和B之间的变化在其中，你将有一个静态页眉和页脚（例如，作为一个角度指令）以及它们之间通过嵌套状态提供的动态内容。现在，您在html文件中只有一个<ui-view>标记，因此不需要隐式命名的视图。另外，$stateProvider可以连接state()来电，这样你可以丢失一些样板。

此外，网址命名的一个适当的做法是遵循你的状态的层次结构。例如，您的状态clientesPotenciales有一个网址'/dashboard/clientesPotenciales'，这表明它是嵌套状态dashboard。事实上，他们仍然处于同一水平。您应该将url更改为'/clientesPotenciales'，如果它没有嵌套，或者将状态名称更改为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>