For a demonstration, I decided to try out this plunker from a tutorial that showcases tab routing across different pages. After downloading the entire zip file and running it as is (e.g. with all files in the same directory and utilizing CDN links), I encountered an issue. It seemed like the angular file was not being included, leading to this output:
Select one of the options below.
tab 1<br/>
tab 2
{{ path }} //intended to display the variable
Interestingly, the plunker version works perfectly fine. Could the problem lie with the base href path or version compatibility? I attempted replacing the provided link for angular.min.js with my own files, but unfortunately, the issue persists.
Here's the HTML snippet I am working with:
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link href="style.css" rel="stylesheet" />
<script data-semver="1.2.7" src="http://code.angularjs.org/1.2.7/angular.js" data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="44252a23312825366a2e3704756a766a3c">[email protected]</a>"></script>
<script src="http://code.angularjs.org/1.2.7/angular-route.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="plunker">
<div ng-controller="NavCtrl">
<p>Select one of the choices below.</p>
<ul>
<li ng-class="{active: isActive('/tab1')}"><a href="#/tab1">tab 1</a>
</li>
<li ng-class="{active: isActive('/tab2')}"><a href="#/tab2">tab 2</a>
</li>
</ul>
<pre>{{ path }}</pre>
</div>
<div ng-view></div>
</body>
</html>