Angular JS multi level routing

Question

I have an application as following structure

Index.html

which has app.js with all routing and ng-view is added inside index.html

I have another template which am loding on successive login over this ng-view is home.html

can i have a ng-view inside the home.htmlas well ? and load to that ng-view when I click on any menus inside link of home page ?

I am adding my routing details bellow

.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' });
}])

can I add a new routing and load a tempale and controler inside home.html in place of index.html ?

Answer 1

If I understood correctly you want a ng-view inside a ng-view. I think you cannot do that. But the solution would be use the parameter reloadOnSearch which you can set as false, so everytime you reload the page changing it's route it will not reload the previously loaded html structure.

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

But to make it work this way you have to type in the fixed html structure in every page you want. A way of doing that is adding includes to your home page and set the view pages by scope variables.

<!--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>