Angular JS多级路由

Question

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

Index.html

其中包含所有路由的 app.js，并且在 index.html

中添加了 ng-view

我有另一个模板，在通过此 ng-view 连续登录时，它是 home.html

我可以在 home.html 里面放一个 ng-view 吗？当我点击主页 link 内的任何菜单时加载到那个 ng-view ?

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

.config(['$routeProvider', 函数($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>

Angular JS多级路由

Angular JS multi level routing

javascript

angularjs

angularjs-routing