With the pane and tabs templates defined, you can add the new custom directives to your AngularJS templates. The format for adding multiple tabs for the new directives is as follows, with title
set to the value that will be rendered in the template code:
<rich_tabs>
<rich_pane title="Tab 1">
Your Content
</rich_pane>
<rich_pane title="Tab 2">
Your Content
</rich_pane>
</rich_tabs>
Listing 29.6 shows the full application view defined for all three projects and implements separate tabs for the weather, draggable, and tables examples. It also loads the CSS code and the rich_ui_app.js
file that will house the JavaScript supporting code for the tabs and pane directives. Notice that you use the ng-include
directive to link to the AngularJS partial files, which makes the template very clean.
01 <!doctype html>
02 <html ng-app="richApp">
03 <head>
04 <title>Rich UI</title>
05 <link rel="stylesheet" type="text/css"
06 href="/static/css/rich_ui_styles.css" />
07 <link rel="stylesheet" type="text/css"
08 href="/static/css/draggable_styles.css" />
09 <link rel="stylesheet" type="text/css"
10 href="/static/css/weather_styles.css" />
11 <link rel="stylesheet" type="text/css"
12 href="/static/css/table_styles.css" />
13 </head>
14 <body>
15 <rich_tabs>
16 <rich_pane title="Weather">
17 <div ng-include="'/static/weather.html'"></div>
18 </rich_pane>
19 <rich_pane title="Draggable">
20 <div ng-include="'/static/draggable.html'"></div>
21 </rich_pane>
22 <rich_pane title="Tables">
23 <div ng-include="'/static/tables.html'"></div>
24 </rich_pane>
25 </rich_tabs>
26 <script src="http://code.angularjs.org/1.2.9/angular.min.js"></script>
27 <script src="/static/js/rich_ui_app.js"></script>
28 </body>
29 </html>