title: AngularJS Routing and ASP.net MVC
body: <p>I'm learning angular, I'm trying to use routes for the first time but something is wrong with it, this is not working:</p>
  
  <p>This is my main view(UsingDirectivesWithDataBinding.cshtml):</p>
  
  <pre><code>@{
      Layout = null;
  }
  
  &lt;html&gt;
  &lt;head&gt;    
      &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="~/Scripts/angular-route.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="~/Scripts/AngularFile.js"&gt;&lt;/script&gt;
      &lt;title&gt;
          Using AngularJS Directives and Data Binding
      &lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;div data-ng-app="myApp" data-ng-controller="SimpleController"&gt;       
          &lt;a href="#/view1"&gt; View 1&lt;/a&gt;
          &lt;a href="#/view2"&gt; View 2&lt;/a&gt;
          &lt;div data-ng-view=""&gt;&lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>As you can see I have two links that call this route : '#/view2' or this one: '#/view1' but it's taking me to the Index page of Home Controller instead of stay in the same page and show the Partial Views I want to display. This is the code I have in Home Controller:</p>
  
  <pre><code>public ActionResult UsingDirectivesWithDataBinding()
          {
              return View();
          }
  
          public PartialViewResult View1()
          {
              return PartialView();
          }
  
          public PartialViewResult View2()
          {
              return PartialView();
          }
  </code></pre>
  
  <p>This is my Javascript file(AngularFile.js):</p>
  
  <pre><code>var app = angular.module("myApp", ["ngRoute"]);
  app.controller("SimpleController", function ($scope) {
      $scope.firstName = "John";
      $scope.lastname = "Doe";
      $scope.customers = [
          { name: "Dave Jones", city: "Phoenix" },
          { name: "Jamie Riley", city: "Atlanta" },
          { name: "Heedy Rowt", city: "Memphis" },
          { name: "Thomas Winter", city: "Seattle" }
      ];
  });
  
  app.config(function ($routeProvider) {
      $routeProvider.when("/view1", {
          templateUrl: "/Home/View1",
          controller: "SimpleController"
      })
      .when("/view2", {
          templateUrl: "/Home/View2",
          controller: "SimpleController"
      })
      .otherwise({redirectTo : "/view1"})
  })
  </code></pre>
  
  <p>Why is not working?</p>