title: Using Angular route in webapi application
body: <p>I'm not sure how can I implement proper Angular routing in web api application. I'm able to open the pages using this approach: <a href="http://localhost:52876/HTML/app/borrower.html" rel="nofollow noreferrer">http://localhost:52876/HTML/app/borrower.html</a></p>
  
  <p>The Angular controller loads fine and all functionality is there from the angular side.</p>
  
  <p>Now, I want to be able to open the views in a bit better view, using ng-route, so for example <a href="http://localhost:52876/HTML/app/borrower.html" rel="nofollow noreferrer">http://localhost:52876/HTML/app/borrower.html</a> will become <a href="http://localhost:52876/borrower" rel="nofollow noreferrer">http://localhost:52876/borrower</a>. </p>
  
  <p>I included the ng-route.js file in the html files which I'm using in my angular app. </p>
  
  <p>Also in app.js I have this: </p>
  
  <pre><code>'use strict';
  
  var modules = [
      'app.controllers',
      'LoanAdminApplicationController',
      'ngCookies',
      'ngResource',
      'ngSanitize',
      'ngRoute',
      'ui.router',
      'LocalStorageModule',
      'angular-loading-bar'
  ];
  
  var app = angular.module('app', modules);
  
  
  app.config(function ($routeProvider, $locationProvider) {
      $locationProvider.html5Mode(true);
      $routeProvider.when("/home", {
          controller: "homeController",
          templateUrl: "/app/views/home.html"
      });
  
      $routeProvider.when("/login", {
          controller: "loginController",
          templateUrl: "/HTML/login.html"
      });
  
      $routeProvider.when("/signup", {
          controller: "signupController",
          templateUrl: "/app/views/signup.html"
      });
  
      $routeProvider.when("/register", {
          controller: "signupController",
          templateUrl: "/app/views/register.html"
      });
  
      $routeProvider.when("/refresh", {
          controller: "refreshController",
          templateUrl: "/app/views/refresh.html"
      });
  
      $routeProvider.when("/tokens", {
          controller: "tokensManagerController",
          templateUrl: "/app/views/tokens.html"
      });
  
      $routeProvider.when("/borrower", {
          controller: "borrowerController",
          templateUrl: "/HTML/app/borrower.html"
      });
  
      $routeProvider.otherwise({ redirectTo: "/home" });
  
  });
  </code></pre>
  
  <p>The html markup (I removed the content):</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="app"&gt;
  &lt;head&gt;
  &lt;/head&gt;
  &lt;body ng-controller="BorrowerQuickQuoteApplication"&gt;
  
  
      &lt;!-- jQuery (necessary for Bootstrap's JavaScript plugins) --&gt;
      &lt;script src="/assets/js/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="/assets/js/modernizr.js"&gt;&lt;/script&gt;
      &lt;!-- Include all compiled plugins (below), or include individual files as needed --&gt;
  
      &lt;script src="/assets/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script src="/Scripts/angular.js"&gt;&lt;/script&gt;
      &lt;script src="/Scripts/angular-cookies.min.js"&gt;&lt;/script&gt;
      &lt;script src="/Scripts/angular-resource.min.js"&gt;&lt;/script&gt;
      &lt;script src="/Scripts/angular-sanitize.min.js"&gt;&lt;/script&gt;
      &lt;script src="/Scripts/angular-route.min.js"&gt;&lt;/script&gt;
      &lt;script src="/Scripts/angular-ui-router.min.js"&gt;&lt;/script&gt;
  &lt;script src="/Angular/controllers.js"&gt;&lt;/script&gt;
      &lt;script src="/Angular/LoanApplicationController.js"&gt;&lt;/script&gt;
      &lt;script src="/Angular/services.js"&gt;&lt;/script&gt;
      &lt;script src="/Scripts/angular-local-storage.min.js"&gt;&lt;/script&gt;
  &lt;script src="/Scripts/loading-bar.min.js"&gt;&lt;/script&gt;
  
  &lt;script src="/Angular/app.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Any idea what I need to do in order to make this working? </p>
  
  <p>Should I modify the RouteConfig.cs file or I need to do anything else as well? </p>