Angular JS Routing is not working in ASP.NET MVC and Web API project

Question

I have two main ASP.NET MVC controllers: Home and User. Home has an Index method that is returning an Index view which is main page for loading partial pages (User Detail, Facility, Login Page) in ng-view. Also, Index view is not using MVC layout. My solution explorer looks like this

Issue is, when I run application, partial pages are not loading in ng-View and URL is not forming correctly.

My Module.js looks like this

/// <reference path="../scripts/angular.js" />
var app = angular.module('ApplicationModule', ['ngRoute']);
app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
    //alert('Im Config');
    $routeProvider.when('/Login',
        {
            templateUrl: 'User/Login',
            controller: 'LoginController'
        })
        .when('/Profile',
            {
                templateUrl: 'User/UserDetail',
                controller: 'ProfileController'
            })
        .when('/Facility',
            {
                templateUrl: 'User/Facility',
                controller: 'FacilityController'
            })
        .otherwise(
            {
            redirectTo: 'User/UserDetail'
            });

    $locationProvider.html5Mode(true).hashPrefix('!');
}]);

My Controller.js looks like this:

/// <reference path="../scripts/angular.js" />
/// <reference path="module.js" />

app.controller("LoginController", function ($scope, $http) {
    alert("Login Controller Called");
}); 
app.controller("ProfileController",  function ($scope, $http) {
    alert("profile Controller Called");
});

app.controller("FacilityController",  function ($scope, $http) {
    alert("Facility controller called");
});

Index.cshtml looks like this

<div>
    <h1>header</h1>
</div>

<div class="main container" ng-view>
    <div>
        <a href="#/Login">Login</a>
        <a href="#/Profile">Profile</a>
        <a href="#/Facility">Facility</a>
    </div>

</div>

<footer class="footer py-4 bg-dark text-light">
    <h1>Footer</h1>
</footer>

Output is as follows:

Login, profile and facility partial views are not loading.

Naila Akbar · Accepted Answer · 2023-09-21 06:35:23Z

0

In AngularJS version 1.6 they changed the hash-prefix for URL hash-bang. Links now have #! instead of #.

so try with this

<div>
  <a href="#!Login">Login</a>
  <a href="#!Profile">Profile</a>
  <a href="#!Facility">Facility</a>
</div>

Or if you want to remove the hash-prefix (!), you would need your config to have this code:

$locationProvider.hashPrefix('');

More about it: commit-aa077e8

answered Sep 21, 2023 at 6:35

Naila Akbar

3,3886 gold badges37 silver badges79 bronze badges

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

Collectives™ on Stack Overflow

Angular JS Routing is not working in ASP.NET MVC and Web API project

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related