Angularjs 定义嵌套视图_Angularjs_Angular Ui Router

Angularjs 定义嵌套视图

angularjs

Angularjs 定义嵌套视图,angularjs,angular-ui-router,Angularjs,Angular Ui Router,我有一个AngularJS的网站，index.html <body> <ui-view ng-cloak></ui-view> </body> 在home.html和help.html（以及其他页面）中，我总是在页面顶部有一个相同的导航栏。因此，我希望避免重复代码，并创建一个/htmls/header.html和一个控制器NavCtrl。因此，我将能够用这些HTML编写有人知道如何修改我的angularApp.js和index.html

我有一个AngularJS的网站，

index.html

<body>
    <ui-view ng-cloak></ui-view>
</body>

在

home.html

和

help.html

（以及其他页面）中，我总是在页面顶部有一个相同的导航栏。因此，我希望避免重复代码，并创建一个

/htmls/header.html

和一个控制器

NavCtrl

。因此，我将能够用这些HTML编写

有人知道如何修改我的

angularApp.js

和

index.html

，让他们接受嵌套的

标题

视图吗？

将配置块中的代码更新为：

$stateProvider      
  .state('home',{       
    views: {        
      'header': {       
        templateUrl: '/htmls/header.html',      
        controller: 'NavCtrl'
      },        
      'content': {      
        templateUrl: '/htmls/home.html',        
        controller: 'MainCtrl'
      }     
    }       
  })
  .state('help',{       
    views: {        
      'header': {       
        templateUrl: '/htmls/header.html',      
        controller: 'NavCtrl'
      },
      'content': {      
        templateUrl: '/htmls/help.html',        
        controller: 'HelpCtrl'  
      }     
    }       
  })

在index.html中，使用它如下所示，其中现在home.html、help.html只能包含没有标题html的内容

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

遵循而不是使用

ui视图，使用组件：
̶<̶d̶i̶v̶ ̶u̶i̶-̶v̶i̶e̶w̶=̶"̶h̶e̶a̶d̶e̶r̶"̶>̶<̶/̶d̶i̶v̶>̶
<my-header></my-header>

非常感谢。我想为那些页面保留@SoftTimur，只需要另一个header1.html，它不包含导航元素（只有纯空白的背景div）。或者，您可以跳过这些状态的标题视图。
̶<̶d̶i̶v̶ ̶u̶i̶-̶v̶i̶e̶w̶=̶"̶h̶e̶a̶d̶e̶r̶"̶>̶<̶/̶d̶i̶v̶>̶
<my-header></my-header>

app.component("myHeader", {
    templateUrl: '/htmls/header.html',      
    controller: 'NavCtrl'
});