Here is the link to my plunker where the view loads as expected on Plunker's website.
Check out My First Angular Single Page Application
However, after downloading the files from Plunker and unzipping them on my local machine, the view does not load as expected when I open index.html. I have reviewed the syntax of href and routes as mentioned in other related discussions.
<body>
<div ng-app="SmartCartApp">
<ul>
<li> <a href="#BaseStationTest">BaseStation Test</a> </li>
<li style="float:right"> <a href="#ContactUs">Contact</a> </li>
</ul>
<div ng-view=""></div>
</div>
<script type="text/ng-template" id="BaseStation.html">
<div id="div1">
<br/> {{message}}
</div>
</script>
<script type="text/ng-template" id="ContactUs.html">
<div id="div2">
<br/> {{message}}
</div>
</script>
</body>
// setting up the SmartCartApp module
var SmartCartApp = angular.module('SmartCartApp', ['ngRoute']);
// configuring the routes
SmartCartApp.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/BaseStationTest', {
templateUrl: 'BaseStation.html',
controller: 'BaseStationController'
})
.when('/ContactUs', {
templateUrl: 'ContactUs.html',
controller: 'ContactUsController'
})
.otherwise({
redirectTo: '/BaseStationTest'
});
}]);
I understand that being an AngularJS SPA, it is a client-side framework and should not require any backend support (such as a web server). By placing all HTML and JavaScript files in a folder and opening index.html, the SPA should load. Please advise if this understanding is incorrect and assist me in resolving the issue.