AngularJs routing issue with MVC routing

Question

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

because your default routing points otherwise({ redirectTo: "/account/index" }); — Pandiyan Cool
– Pandiyan Cool, Commented Jul 7, 2016 at 7:15
But When I am on MVC page and If I again click on MVC page then there isn't any issue — Mahajan344
– Mahajan344, Commented Jul 7, 2016 at 7:21
this is happening because of how html5Mode works. The folks that designed the 3rd party ui-router have written an excellent guide to how to configure a wide variety of servers to handle this. github.com/angular-ui/ui-router/wiki/… — Claies
– Claies, Commented Jul 7, 2016 at 9:02

Ruben.sar · Accepted Answer · 2016-07-07 08:57:53Z

1

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;

                });
            }
        }

answered Jul 7, 2016 at 8:57

Ruben.sar

3863 silver badges12 bronze badges

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

Collectives™ on Stack Overflow

AngularJs routing issue with MVC routing

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