Implementing the Tabbed View
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 ...
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Read now
Unlock full access