Question

查看单个webapp，它们周围有不同的主体，即主模板旁边的页眉和页脚应该是不同的。我们可以根据$ stateProvider

中的URL来决定选择哪个模板

Answer 1

如果您正在使用$ stateProvider，那么您必须使用ui-view指令而不是ng-view。 ng-view是ngRoute服务，您需要使用$ routeProvider。

是的，你可以在同一页面上有多个ui-view，它被称为多个命名视图。所以，让我们在index.html上说，你可以这样说：

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

现在，在您的州定义中，您可以拥有：

$stateProvider      
  .state('app', {        
    views: {        
      'header': { ... templates and/or controllers ... },   
      'mainsection': { ... templates and/or controllers ... },
      'footer': { ... templates and/or controllers ... } 
    }       
})

现在，在上面的不同视图代码中，您可以拥有不同的模板集以及具有特定URL的特定状态的控制器（或版本中的组件> 1.5）。因此，通过这种方式，您可以决定每个状态（url）显示页面特定部分的内容，如页眉，页脚，内容。如果某个部分将保持不变，那么通过对具有该特定视图名称的那些状态使用相同的templateUrl，您可以获得良好的可重用性功能。

查看文档以获取更多详细信息：https://ui-router.github.io/guide/views#multiple-named-uiviews

我们是否可以为包含不同模板的单个应用程序创建两个ng-view？

1 个答案: