Angular routing not working with ASP.Net MVC

Question

Home page I am using AngularJS with my ASP.Net MVC application and I am using angular routing but it is not working.

The angular routes are defined as:

var app = angular.module("webApp",['ngRoute']); app.config(function($routeProvider){ $routeProvider.when( "/",{ templateUrl: "home/dashboard", controller: "webCtrl" }) .when( "/page1",{ templateUrl: "home/contact", controller: "page1Ctrl" }) .otherwise({ templateUrl: "home/contact", controller: "page1Ctrl" }); });

The navigation links are displayed on index.cshtml as given below:

<body ng-app="webApp"> <a href="#/">Home</a> <a href="#page1">Page1</a> <div ng-view></div> </body>

It displays dashboard when launched but doesn't display contact page when second link is clicked. Also, it displays strange URLs. On the homepage it dislays http://localhost:58193/#!/ and when I click on page1 link URL gets changed to http://localhost:58193/#!/#%2Fpage1.Please let me know if I am mistaking anything.

add screen shot of that you see on the browser along with console errors if any — Aravind
– Aravind, Commented Jan 7, 2017 at 19:26
update your asp.net controller , complete code of angular routes. — Aravind
– Aravind, Commented Jan 7, 2017 at 20:02

federico scamuzzi · Accepted Answer · 2017-01-07 20:27:13Z

have you tried to do like this?

var app = angular.module("webApp",['ngRoute']); app.config(function($routeProvider){ $routeProvider.when( "/",{ templateUrl: "/home/dashboard", controller: "webCtrl" }) .when( "/page1",{ templateUrl: "/home/contact", controller: "page1Ctrl" }); $routeProvider.otherwise({ redirectTo: "/page1" }); $locationProvider.hashPrefix("!"); });

then:

<body ng-app="webApp"> <a ng-href="#!page1">Page1</a> <div ng-view></div> </body>

and maybe put in your index-html in your section this:

 <meta name="fragment" content="!"> <base href="/">

Thanks Federico! It worked when I changed anchor tag's href to !#page1. However I still wonder why it is showing strange URLs in the browser like localhost:58193/#!/(home page) and (localhost:58193/#!/page1) for page1.

Collectives™ on Stack Overflow

Angular routing not working with ASP.Net MVC

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related