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

Having problems getting angularJS routing to work in my 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

enter image description here

enter image description here

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.

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</a></li>
            <li><a href="">Store</a></li>

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

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

    <script src=""></script>
    <script src=""></script>
      <script src=""></script>
    <script src=""></script>


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

config(['$routeProvider', function ($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'
      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.';

enter image description here


I have implemented this before with minimal issues. Cant recall any special settings that needed to be set. Form validation can be tricky as the web application wraps most of the page in a form. Without more information on your specific problems that is all I am able to provide.

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=""><i class="fa fa-shield"></i> About</a></li>
    <li><a href=""><i class="fa fa-comment"></i> Contact</a></li>
  2. Add this locationProvider config before your routeProvider.

    scotchApp.config(['$locationProvider', function ($locationProvider) {


 ? Bootstrap.navbar + Angular.routeProvider not working also not giving any error in chrome
 ? Angular $location search does not work always
 ? Can we pass two parameters in $routeProvider.when() function in angular js
 ? Angular 1.x/2 Hybrid, karma tests not bootstrapping ng1 app
 ? Node server to intercept all request from angular (http) to java spring backend
 ? Angular change url without executing routeprovider
 ? Angular js - call a route without view
 ? .config $routeprovider angularjs
 ? Angular JS not loading view
 ? AngularJS directive vs routeProvider