CODEWITHSUNDEEP
angularjsasp.net-mvc
gliese 581 g
gliese 581 g

Reputation: 379

Angular routing not working with ASP.Net MVC

Home page Page1 link clickI 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.

Upvotes: 0

Views: 1835

Answers (1)

federico scamuzzi
federico scamuzzi

Reputation: 3778

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="/">

Upvotes: 1

Related Questions