I stumbled upon this jsfiddle demo code that offers multiple tabs for a single AngularJS webpage.
http://jsfiddle.net/helpme128/99z393hn/
I decided to integrate it into my own project. I specifically wanted one tab to load a particular webpage called my-custom-page.html.
Below are the relevant snippets from my code. Starting with the HTML section;
<div id="tabs" ng-controller="StkViewMainCtrl">
<ul>
<li ng-repeat="tab in tabs"
ng-class="{active:isActiveTab(tab.url)}"
ng-click="onClickTab(tab)">{{tab.title}}
</li>
</ul>
<div id="mainView">
<div ng-include="currentTab"></div>
</div>
</div>
<script type="text/ng-template" id="one.tpl.html">
<div id="viewOne">
<h1>View One</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in varius mauris. Aenean et nisi nec diam dictum maximus.</p>
</div>
</script>
<script type="text/ng-template" id="my-custom-page.html">
<div id="viewTwo">
<h1>View Two</h1>
<p>Suspendisse potenti. Nullam sodales imperdiet tristique. Proin non rutrum justo, sed venenatis quam. Quisque dapibus risus magna, vel fermentum lacus bibendum ac.</p>
</div>
</script>
The controller part of the code;
.controller('StkViewMainCtrl', ['$scope', 'configuration',
function ($scope, $configuration) {
$scope.tabs = [{
title: 'One',
url: 'one.tpl.html'
}, {
title: 'Two',
url: 'my-custom-page.html'
}, {
title: 'Three',
url: 'three.tpl.html'
}];
$scope.currentTab = 'one.tpl.html';
$scope.onClickTab = function (tab) {
$scope.currentTab = tab.url;
}
$scope.isActiveTab = function(tabUrl) {
return tabUrl == $scope.currentTab;
}
}]);
To my disappointment, the desired effect did not occur. The content of my-custom-page.html failed to load even though it is located in the same folder as the main webpage being accessed.