Mixing Angular routing with MVC Partial Views?

Question

I would like to use angular templates for most of my application, but for some pages I'd want to use aspnet mvc controllers and partial views displayed in the ng-view.

I've been trying things like this with the routing:

when('/AccountX/Manage', { templateUrl: '/Account/Manage', controller: AccountController }).
when('/Account/Manage', { controller: AccountController }).

I've also changed the Account/Manage forms to be ajax, but it seems after posting a form, angular proceeds with a get.

I'm using html5Mode without hashbangs. My aim is to have always normal urls.

Is there a way to tell angular to avoid some routes? Like IgnoreRoute in aspnet MVC?

Sorry if I'm too vague. For my own understanding, I just want to find a working concept of mixing standard aspnet mvc with angular regardless if it's considered good or bad.

Community · Accepted Answer · 2017-05-23 12:21:37Z

1

Looks like there are ways to use the $location service to accomplish what you are requesting:

Conditionally have anchor links send user to a different page, rather than load to ng-view

edited May 23, 2017 at 12:21

CommunityBot

11 silver badge

answered Jul 27, 2013 at 2:20

Andy T

9,9315 gold badges56 silver badges97 bronze badges

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

1 Comment

Carl R Over a year ago

The target attribute doesn't help for managing problems with form posts. It does work fine for the arbitrary link thou.

Carl R · Accepted Answer · 2013-07-27 04:19:20Z

It seems a big part of making it work is to avoid assigning ng-app to the html element. When the ng-app is smaller, the parts outside it will not be affected by the routing.

There are some potential issues along the way:

ng-app can't be nested.
only the first ng-app becomes automatically bootstrapped.
latter ng-app is instead added like this: angular.bootstrap(element[, modules]);

http://docs.angularjs.org/api/ng.directive:ngApp
http://docs.angularjs.org/api/angular.bootstrap

When there are links within the ng-app that should not trigger the angular routing, it's avoided by adding target="_self" (or any target attribute).

There is a good project template for mvc4+angular+breeze available which can be studied and tested. (At least VS 2012 Update 2 is required for it.)
http://www.asp.net/single-page-application/overview/templates/breezeangular-template

Conclusion

By partitioning the application within the html page such that there are parts that isn't affected by the routing, and excluding individual links within an ng-app when needed, Asp.NET MVC functionality can successfully be mixed with AngularJS.

Collectives™ on Stack Overflow

Mixing Angular routing with MVC Partial Views?

2 Answers 2

1 Comment

Conclusion

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Conclusion

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related