Table

Have Fun With RoutedTab by Mark Qian

The problem:

So far (by 4/2015) UI Bootstrap provides an extremely simple/basic tab component (ui.bootstrap.tabs). You need to include the content of tab within the "tab" tags.
Or do it yourself with ui-view. In order to get a tab work with your templates and controllers for your tab content area, you need to wire a lot (routing and insert controllers).
There is another approach using directive but you still need to do a lot of coding "outside" the tab tags.

The problem is that we don't want to do any javascript wiring and don't want to embed content of tabs within the tabs in the main html either. We only want to assign the reference of template and controller for each tab inside main HTML.

The solution:

Here is what RoutedTab offers: you can specify everything inside the "Routed-Tab" tag: your templates and controllers. No additional wiring!
(Note: this is a "component", not a directive)

How did I make it:

The major reason that the Boostrap tabs directive can not deal with routing is that the link of directive is invoked after the cofiguration phase where the routing has to be done. So it is too late for a directive to setup routing in its link phase. Directives are a mean provided AngularJS to extand html (tag like tabs) but it faces a "chicken and egg" issue:

Tags needs to availabe before routing can be setup (during the configuration phase) since tags are the targets of routing but AngularJS arranges the construction of tags (directive link phase) after configuration where routing is setup (see "Angular js - resolve and run() order of execution" here).

Instead of building the tabs in directives, I break the "chicken and egg" relation by processing scanning and construction of tabs before the configuration phase so that the tabs elements can be routed in the phase.

The result is that all the configuration of the tabs including specifying templateUrls and controllers is done within the HTML tag "Routed-Tab". No coding/wiring/routing outside the tab HTML block!

Demo:

Table /currency views/Currency.htm CurrencyController Master Detail /house views/House.htm HouseController Side Bar /page2 views/Page2.htm Page2Controller Nested Tabs /page3 views/Page3.htm Page3Controller

The html:

<Routed-Tab>
	<tab name = "currency">
		<tabheader>
			<title>Currency Rate</title>
		</tabheader>
		<tabbody>
			<url>/currency</url>
			<templateUrl>views/Currency.htm</templateUrl>
			<controller>CurrencyController</controller>
		</tabbody>
	</tab>
	<tab name="house">
		<tabheader>
			<title>House Info</title>
		</tabheader>
		<tabbody>
			<url>/house</url>
			<templateUrl>views/House.htm</templateUrl>
			<controller>HouseController</controller>
		</tabbody>
	</tab>
	<tab name="page2">
		<tabheader>
			<title>Page 2</title>
		</tabheader>
		<tabbody>
			<url>/page2</url>
			<templateUrl>views/Page2.htm</templateUrl>
			<controller>Page2Controller</controller>
		</tabbody>
	</tab>
	<tab name="page3">
		<tabheader>
			<title>Page 3</title>
		</tabheader>
		<tabbody>
			<url>/page3</url>
			<templateUrl>views/Page3.htm</templateUrl>
			<controller>Page3Controller</controller>
		</tabbody>
	</tab>
</Routed-Tab>