Configure .net mvc with angular to use html 5 mode

Question

I'm developing an application in .net mvc with angularjs. When I don't use html5 mode it works fine, but when I set html5 mode to true the server calls that address giving me an he resource cannot be found.

This is my app.js

var app = angular.module("myApp", ['ngRoute'])
.config(function ($routeProvider, $locationProvider) {
    $routeProvider.when('/test',
    {
        templateUrl: 'templates/TestPage.html',
        controller: 'ProfesionalController'
    });

    $routeProvider.otherwise({ redirectTo: '/' });

    $locationProvider.html5Mode(true);


});

And this is my view (layout):

<!DOCTYPE html>
<script src="~/Scripts/angular/angular.js"></script>
<script src="~/Scripts/angular/angular-route.js"></script>

<script src="~/app/app.js"></script>
<script src="~/app/home/home.js"></script>
<script src="~/app/profesional/profesional.js"></script>
<base href="/">
         <a href="test">Test</a>
         @*this is the link*@

        </div>
    </div>
</div>
<div ng-app="myApp" class="container body-content">
    <div ng-view></div>
    @RenderBody()

</div>

When I click to test link the server try to locate: http://localhost:39881/test" giving me an 404 Not Found - http://localhost:39881/test"

What I'm missing. It works well with no html5 mode.

possible duplicate of asp.net mvc hosting angular app with html5mode and routing — user47589
– user47589, Commented Jul 28, 2015 at 19:55
The angular controller i'ts not big thing: app.controller('ProfesionalController', function ($scope) { $scope.profesional= 'hi Customer!'; }); — Diego Unanue
– Diego Unanue, Commented Jul 28, 2015 at 19:59
The MVC controller it's the default index controller: public class CustomerController : Controller { // // GET: /Customer/ public ActionResult Index() { return View(); } } — Diego Unanue
– Diego Unanue, Commented Jul 28, 2015 at 20:15

Maciej Wojsław · Accepted Answer · 2015-07-28 20:28:04Z

2

In your mvc route config catch all url's and redirect to your index page. It will help.

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

answered Jul 28, 2015 at 20:28

Maciej Wojsław

4032 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Matt Over a year ago

With a catchall, how do you route JSON posts/requests to the proper controller?

Diego Unanue Over a year ago

Configure mvc routing it's in case you hit refresh located in an angular route don't get a 404, because it will hit the server with an unknown url. If you use the links that's not necessary.

Maciej Wojsław Over a year ago

In this case I'm using WebAPI controllers to post/get data, with different routing. I'm dont use MVC Controllers at all. All routing and templating doing by Angular.

Tzach Ovadia Over a year ago

Worked for me (API calls were not affected). Only needed to replace url: with template:

Collectives™ on Stack Overflow

Configure .net mvc with angular to use html 5 mode

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related