CODEWITHSUNDEEP
angularjsasp.net-mvc
Mahajan344
Mahajan344

Reputation: 2550

AngularJs routing issue with MVC routing

I am working on MVC application where I need build some module in angularjS. So Now I have angular client side routing as well as MVC routing too.

Now I am getting a problem that When Page is redirected to using MVC routing then If I click on MVC page its working.

For eg: After login, I am redirecting to Listing view which is working fine. Now on menu click /Listing is working fine.

Now if i open any angularjs routing page then its opening that page. Now when I am on angularjs page , if I click on same menu link where /Listing is .. I am being redirected to default angularjs route.

How do handle both MVC and angularjs routing?

eg : menu link is as below

$("#lnkAddUser").attr("href", serverURL + "#/registeruser");
            $("#lnkTreqHome").attr("href", serverURL + "Listing");

'#' link is for angualr page and other link is for mvc page

angular routing is as below

angularFormsApp.config(["$routeProvider", "$locationProvider",
    function ($routeProvider, $locationProvider) {
        $routeProvider.caseInsensitiveMatch = true;
        $routeProvider
            .when("/account/index", {
                title: "Login",
                templateUrl: window.serverURL+"app/Login/loginTemplate.html",
                controller: "loginController"
            })
            .when("/Registeruser", {
                title: "New External User Setup",
                templateUrl: window.serverURL + "app/RegisterUser/registeruserTemplate.html",
                controller: "RegisterUserController"
            })
            .otherwise({ redirectTo: "/account/index" });

        $locationProvider.html5Mode({
            enabled: true,
            requireBase: true
        });
        //$locationProvider.html5Mode(true);

    }]);

Now If I am on MVC page and I click on angular page its working.. but when I am on angular page and I click MVC page its redirecting to otherwise page

Upvotes: 0

Views: 159

Answers (1)

Ruben.sar
Ruben.sar

Reputation: 386

You can create a custom decorator directive and apply it to all your hyperlink

<a href="/someaction" to-mvc-link/>

And implement toMvcLink directive like this

return {
            restrict: 'A',
            scope: true,
            link: function (scope, element, attrs) {                  

                element.bind('click', function (event) {

                        document.location.href = attrs.href;

                });
            }
        }

Upvotes: 1

Related Questions