Reusable child states with ui-router
I am using ui-router to manage app state using AngularJS. I have one particular set of states that appear modal in many places throughout the application. The state .modal
is an abstract parent state, and there are several tab states that are children of this : .modal.tab1
, .modal.tab2
etc.
My current implementation requires duplicating all modal states in mine $stateProvider
, for example:
main (/)
main.page1 (/page1)
main.page1.modal (abstract)
main.page1.modal.tab1 (/page1/modal/tab1)
main.page1.modal.tab2 (/page1/modal/tab2)
main.page1.modal.tab3 (/page1/modal/tab3)
main.page1.modal.tab4 (/page1/modal/tab4)
...
main.page2 (/page2)
main.page2.modal (abstract)
main.page2.modal.tab1 (/page2/modal/tab1)
main.page2.modal.tab2 (/page2/modal/tab2)
...
This is url structure and state inheritance which I want because I want to see the correct content behind the modal when it appears. But, as you can see, each new page significantly increases the number of state declarations I need to make.
Is there a way to declare these states just once and then bind them to multiple parents? Something along these lines would hypothetically be perfect:
main (/)
main.page1 (/page1)
main.page2 (/page2)
.modal (*/modal) parent:[main.page1,main.page2]
modal.tab1 (*/modal/tab1)
modal.tab2 (*/modal/tab2)
...
Is this possible? Another thought of mine was to declare all modal state config objects at the top of the code and then pass those objects to the appropriate states in $stateProvider
. This won't really accomplish what I'm looking for, but it will at least reduce the amount of repetitive code.
source to share
Follow this approach: 1. declare all tabs 2. declare all pages 3. Scroll through each page and add it to the state and on each page iteration, add all the tabs to the current page.
this way you will have all tabs added to all pages
var tabs = {
".modal/tab1": {
url: "/modal/tab1",
templateUrl: "tab1.html"
},
".modal/tab2": {
url: "/modal/tab2",
templateUrl: "tab2.html"
}
};
var pages = {
"page1": {
url: "/page1",
templateUrl: "page1.html"
},
"page2": {
state: "page2",
url: "/page2",
templateUrl: "page2.html"
}
}
for(var key in pages){ //loop through all the pages
var state = key; //state of page
var options = pages[key]; //{url,templateURL} etc
$stateProvider.state(state,options); //add pages to states
for(var keyTab in tabs){ //now loop through all the tabs and add to current page
var stateTabs = state + keyTab; // e.g. "page"+".modal/tab1" for page1 i.e. "page1.modal/tab1
var optionsTab = tabs[keyTab];
optionsTab.url = options.url + optionsTab.url; //appended url to show i.e. "/page1/modal/tab1"
$stateProvider.state(stateTabs.optionsTab); //add each tab to page here
}
}
source to share