My site has 2 parts : home page and dashboard
in angular we are serving from main index.html -> thats ok.
in my situation , i want to implement this kind of logic,
there is a ROOT state (probably an abstract one), and my main module name is app.
angular.module('app',['ui.router', 'app.home','app.dashboard']);
angular.module('app')
.config(function($stateProvider, $urlRouterProvider, $locationProvider){
$stateProvider
.state('root', {
abstract: true,
url:'',
template:'<ui-view />'
});
$urlRouterProvider.otherwise('/');
$locationProvider.html5Mode(true);
});
for the home module , i created app.home which is depended in app module, and i want this home module's states under root state
also home module's about, features, etc. states in home state as root like
angular.module('app.home').config(routes);
function routes($stateProvider, $urlRouterProvider){
$stateProvider
.state('home', {
parent: 'root',
url:'/',
controller: 'HomeController',
controllerAs: 'homeCtrl',
templateUrl: 'modules/home/views/home.html'
})
.state('home.about',{
parent:'home',
url:'/about',
controller: 'AboutController',
controllerAs: 'aboutCtrl',
templateUrl:'modules/home/views/about.html'
})
.state('home.features',{
parent:'home',
url:'/features',
controller: 'FeaturesController',
controllerAs: 'featuresCtrl',
templateUrl:'modules/home/views/features.html'
});
}
root > home > others(about, features) root > dashboard > other()
So, i want to use home.html as a second wrapper root under main ROOT to serve about, feature pages (because all of this pages shares common views header, navbar, footer etc.)
Also, i have a dashboard module which has completely different layout than the home module, like the home module i want to use dashboard.html as a root layout for the states under my dashboard
root > dashboard > other states
Sum up, i want one Big ROOT parent, and under that Multiple Module parents act as a root to their related pages.