Angular JS多级布线

Question

我有一个如下结构的应用程序

Index.html

其中包含所有路由的app.js，并且在index.html内部添加了ng-view

我有另一个模板，这是加载在这个ng视图连续登录是home.html

我可以在home.html中也有一个ng-view吗？并且当我点击主页中的任何菜单链接时加载到该ng-view？

我在下面添加我的路由详细信息

.config(['$routeProvider'，function ($routeProvider) {

$routeProvider
    .when('/login', {
        controller: 'LoginController',
        templateUrl: 'modules/authentication/views/login.html'
    })

    .when('/home', {
        controller: 'HomeController',
        templateUrl: 'modules/home/views/home.html'
    })

    .otherwise({ redirectTo: '/login' });
}])

我可以在home.html中添加新的路由并加载模板和控制器来代替index.html吗？

Answer 1

如果我理解正确的话，您希望在ng-view中使用ng-view。我认为你不能这样做。但解决方案是使用参数reloadOnSearch，您可以将该参数设置为false，这样每次重新加载页面更改其路由时，它将不会重新加载先前加载的html结构。

.when('/home', {
    controller: 'HomeController',
    templateUrl: 'modules/home/views/home.html',
    reloadOnSearch: false
})

但是要让它以这种方式工作，你必须在你想要的每个页面中输入固定的html结构。一种方法是将包含内容添加到您的主页，并通过范围变量设置视图页面。

<!--home.html-->
<!--define your structure here-->

<!--includes that will load the desired pages-->
<div>
  <div ng-include="'./indexGeneral.html'"  ng-if="Page == 'general'"></div>
  <div ng-include="'./indexContacts.html'" ng-if="Page == 'contacts'"></div>
  <div ng-include="'./indexVehicles.html'" ng-if="Page == 'vehicles'"></div>
</div>