Are additional settings required for AngularJS routing to work in asp.net Web Application (Not MVC)?

Question

Having problems getting angularJS routing to work in my asp.net application.

Note: AngularJS routing basically allows multiple views to be inserted interchangeably into the same page without page refresh.

Are their any connection settings or http settings that need to be adjusted in order for routing to work? Can AngularJS routing work with the ASP settings "right out of the box" (after of course including the angular.min.js/angular-route.js scripts)?

Just implementing a plain ASP.NET Web Application

I found a few tutorials on the web like this one, however they don't help with routing, and sometimes use templates that are not available.

https://www.pluralsight.com/blog/software-development/angularjs-for-asp-net-applications

For Clarification This post is asking if any additional settings are required, or if routing works right out of the box with an ASP Web Application as long as the required angular scripts(angular.min.js/angular-route.js) are included.

Angular Example --Index.aspx--

<div ng-app="AngularStore" class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="min-height:400px;">  
    <div ng-controller="mainController"> 
        <nav class="navbar navbar-default">
            <div class="container">
            <ul class="nav navbar-nav navbar-right">
            <li><a href="#/cart">Cart</a></li>
            <li><a href="#/store">Store</a></li>
            </ul>
            </div>
        </nav>

        <div id="main">
            <div ng-view></div>
        </div>
    </div>

<%--//javascript scripts--%>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
    <script src="/scripts/angular.min.js"></script>
      <script src="/scripts/angular-route.js"></script>
    <script src="script.js"></script>
</div>

--script.js--

var storeApp = angular.module('AngularStore', ['ngRoute']).

config(['$routeProvider', function ($routeProvider) {
$routeProvider.
  when('/store', {
      templateUrl: "partials/store.html",
      controller: 'HomeController'
  }).
  when('/products/:productSku', {
      templateUrl: 'partials/product.html',
      controller: 'HomeController'
  }).
  when('/cart', {
      templateUrl: 'partials/shoppingCart.html',
      controller: 'cartController'
  }).
  otherwise({
      redirectTo: '/cart'
  });
}]);

//I have tried including $route in function dependencies here.
storeApp.controller('HomeController', function ($scope) {
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!';
});

storeApp.controller('cartController', function ($scope) {
$scope.message = 'Look! I am a cartController page.';
});

storeApp.controller('mainController', function ($scope) {
$scope.message = 'Look! I am a mainController page.';
});

Answer 1

These additional steps made it work.

1. Add #/ before the hrefs:

   <li><a href="#/"><i class="fa fa-home"></i> Home</a></li>
   <li><a href="#/about"><i class="fa fa-shield"></i> About</a></li>
   <li><a href="#/contact"><i class="fa fa-comment"></i> Contact</a></li>
   

2. Add this locationProvider config before your routeProvider.

   scotchApp.config(['$locationProvider', function ($locationProvider) {
       $locationProvider.hashPrefix('');
   }]);