title: AngularJS - ui-router - MVC 5 - html5mode
body: <p>I am trying to create a mini SPA with <strong>AngularJS</strong> and <strong>MVC 5</strong>. In addition to that, I want to use <strong>ui-router</strong> plugin for AngularJS instead of ng-route and want to enable <strong>html5mode</strong>.</p>
  
  <p>My problem is, whenever I click on an anchor element, it refreshes the page and sends request to ASP.NET MVC controller and puts the selected view in the right place, I want it not to reload.</p>
  
  <p>If I change AngularJS routing mechanism to ng-route, then it works as I wanted, does not refreshes the page, and routes to the selected view.</p>
  
  <p>In MVC 5 <strong>RouteConfig.cs</strong> file,</p>
  
  <pre><code>        routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
  
          routes.MapRoute(
              name: "SpaUI",
              url: "{SpaUI}/{*catchall}",
              defaults: new { controller = "SpaUI", action = "Index", id = UrlParameter.Optional }
          );
  
          routes.MapRoute(
              name: "Default",
              url: "{controller}/{action}/{id}",
              defaults: new { controller = "SpaUI", action = "Index", id = UrlParameter.Optional }
          );
  </code></pre>
  
  <hr>
  
  <p>In <strong>app.js</strong> file for AngularJS,</p>
  
  <pre><code>app.config(['$stateProvider', '$provide', '$locationProvider', '$urlRouterProvider', function ($stateProvider, $provide, $locationProvider, $urlRouterProvider) {
  
      $urlRouterProvider.otherwise('/Dashboard');
  
      $stateProvider
      .state("dashboard", {
          url: "/Dashboard",
          templateUrl: "AngularViews/dashboard.html"
      })
  
      .state("test", {
          url: "/Test",
          templateUrl: "AngularViews/test.html"
      });
  
      $locationProvider.html5Mode(true);
   }]);
  </code></pre>
  
  <hr>
  
  <p>In <strong>_Layout.cshtml</strong> file for anchors;</p>
  
  <pre><code> &lt;a data-ui-sref="dashboard" title="Dashboard"&gt;
  </code></pre>
  
  <hr>
  
  <p>In same <strong>_Layout.cshtml</strong> file for view placeholder</p>
  
  <pre><code> &lt;div id="content" data-ui-view="" class="view-animate"&gt;&lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <p>How can I make all of these things play together without reloading the page? 
  Any ideas are appreciated :)</p>