Actualización de la página ASP.Net mvc & Angularjs y aparece el error 404

Estoy aprendiendo Angularjs . entonces implementé un pequeño proyecto junto con angular js, enrutamiento angularJs y asp.net mvc5. estoy usando VS2013 IDE.

La parte de Angular js funciona como se esperaba, pero cuando actualizo la página, aparece el error 404.

aquí está mi código de controlador MVC.

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult Students()
    {
        return View();
    }

    public ActionResult GetCourse()
    {
        //string updatedata = p1 + " welcome";
        //string[] Courses = { "C#", "VB.Net", "SQL", "RDBMS", "ReactJs" };
        //return Json(Courses, JsonRequestBehavior.AllowGet);

        List<course> crs = new List<course>();
        crs.Add(new course { Name = "C#" });
        crs.Add(new course { Name = "VB.Net" });
        crs.Add(new course { Name = "SQL" });
        crs.Add(new course { Name = "RDBMS" });
        crs.Add(new course { Name = "ReactJs" });
        crs.Add(new course { Name = "MongoDb" });
        crs.Add(new course { Name = "PHP" });
        return Json(crs, JsonRequestBehavior.AllowGet);

        //return new JsonResult { Data = crs, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
    }

    public ActionResult GetStudents()
    {
        List<Students> std = new List<Students>();
        std.Add(new Students {ID=1, Name = "John",Country="UK" });
        std.Add(new Students { ID = 2, Name = "Sam", Country = "USA" });
        std.Add(new Students { ID = 3, Name = "Andrew", Country = "USA" });
        std.Add(new Students { ID = 4, Name = "Dibyendu", Country = "India" });
        std.Add(new Students { ID = 5, Name = "Arijit", Country = "India" });
        return Json(std, JsonRequestBehavior.AllowGet);
    }
}

public class course
{
    public string Name { get; set; }
}

public class Students
{
    public int ID { get; set; }
    public string Name { get; set; }
    public string Country { get; set; }
}

Mi código route.config

        routes.MapRoute(
            name: "Default",
            url: "{controller}/{action}/{id}",
            defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
        );

Esta es mi página de diseño de MVC donde agregué todas las rutas js.

<!DOCTYPE html>
<html lang="en" ng-app="DemoApp">
<head>
    <title>{{Title}}</title>
    <base href="/">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    @Styles.Render("~/Content/sample.css")
</head>
<body>
    <header>
        <h2>Header</h2>
    </header>
    <section>
        <nav>
            <ul>
                <li><a href="/home">Home</a></li>
                <li><a href="/course">Course</a></li>
                <li><a href="/students">Students</a></li>
            </ul>
        </nav>
        <div>
            @RenderBody()
            <div>
                <ng-view></ng-view>
            </div>
        </div>
        <div id="footer">
            <p>Footer</p>
        </div>
    </section>

    <script type="text/javascript">
        var GetCoursesUrl = '@Url.Action("GetCourses", "Home")';
    </script>

    @RenderSection("scripts", required: false)
    <script src="@Url.Content("~/Scripts/angular.js")"></script>
    <script src="@Url.Content("~/Scripts/angular-route.js")"></script>
    <script src="@Url.Content("~/Scripts/Script.js")"></script>
</body>
</html>

este es mi archivo de script js donde están el módulo angular y los controladores.

/// <reference path="_references.js" />
var app = angular.module("DemoApp", ["ngRoute"])
                .config(function ($routeProvider, $locationProvider) {
                    $routeProvider
                    .when('/', { // This is for reditect to another route
                        redirectTo: function () {
                            return '/home';
                        }
                    })
                    .when("/home",
                    {
                        templateUrl: "Template/Home.html",
                        controller: "homeController"
                    })
                    .when("/course",
                    {
                        templateUrl: "Template/Course.html",
                        controller: "courseController"
                    })
                    .when("/students",
                    {
                        templateUrl: "Template/Students.html",
                        controller: "studentController"
                    })
                    //.otherwise({
                    //    templateUrl: '/Template/Error.html',
                    //    controller: 'ErrorController'
                    //})
                    //$locationProvider.html5Mode(false).hashPrefix('!'); // This is for Hashbang Mode
                    $locationProvider.html5Mode(true)

                })
                .controller("homeController", function($scope)
                {
                    $scope.Message = "Home Page!!";
                    $scope.Title = "Home";
                })
                .controller("courseController", function ($scope, $http) {
                    //$scope.Courses = ["C#", "VB.Net", "SQL", "RDBMS"];
                    $scope.Title = "Courses";
                    $http({
                        url: "/Home/GetCourse",
                        method: 'GET'
                    })
                    .then(function (response) {
                        console.log(response.data);
                        //$log.info(response.data);
                        $scope.Courses = response.data;
                    });
                })
                .controller("studentController", function ($scope, $http) {
                    //$scope.Students = ["John", "Sam", "Mac", "Jeff"];
                    $scope.Title = "Students";
                    $http({
                        url: "/Home/GetStudents",
                        method: 'GET'
                    })
                    .then(function (response) {
                        console.log(response.data);
                        //$log.info(response.data);
                        $scope.Students = response.data;
                    });
                })
    

mi proyecto esta funcionando. el único problema es cuando actualizo la página y aparece el error 404.

Tengo esta URL reescrita en el archivo de configuración que comenté ahora.

  <!--<system.webServer>
    <rewrite>
      <rules>
        <rule name="AngularJS" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>-->

Comenté porque la regla de reescritura de URL anterior bloquea la llamada $ http. cuando se comenta, la llamada $http comienza a funcionar .

También tenía una ruta catchall en . route.config, pero eso tampoco me ayudó a resolver el problema de recarga de la página. esta es mi ruta catchAll en el archivo route.config que se comenta hasta ahora.

        //routes.MapRoute(
        //    name: "App",
        //    url: "{*url}",
        //    defaults: new
        //    {
        //        controller = "Home",
        //        action = "Index"
        //    }
        //);

por favor guíame cuál es el problema por el cual la actualización de la página no funciona. Estoy buscando una ayuda paso a paso para resolver este problema. Busco en Google pero todavía no tuve suerte para deshacerme de este problema.

Gracias

Answer