Угловая многоуровневая маршрутизация JS - PullRequest
Новая
       20

Угловая многоуровневая маршрутизация JS

0 голосов
/ 29 января 2019

У меня есть приложение в виде следующей структуры 

Index.html

, которая имеет app.js со всей маршрутизацией и ng-view добавлена ​​внутри index.html

У меня есть другой шаблон, который lodingпри последовательном входе в систему через этот ng-view home.html

могу ли я иметь ng-view внутри home.html?и загрузить к этому 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?

1 Ответ

0 голосов
/ 29 января 2019

Если я правильно понял, вы хотите ng-просмотр внутри ng-просмотра.Я думаю, что вы не можете этого сделать.Но решением было бы использовать параметр 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>
...