MVC 5 with Angular JS (Angular Routing Vs MVC 5 Routing)

313 views
Skip to first unread message

Banuprasad S

unread,
Apr 27, 2015, 1:13:10 PM4/27/15
to ang...@googlegroups.com
Hello,

I need some suggestion of using MVC 5 with Angular JS without having to use Angular JS routing. I was under assumption that angular JS was mainly designed for Single page application and MVC 5 routing will not suitable for Angular JS.  In my test prototype I did  noticed that when MVC 5 routing is used, Angular JS services are getting initialized on each MVC page and unless i use mvc partial views. Is it possible to Use MVC 5 routing instead of Angular JS?

Thanks
Banu

Ludger Peters

unread,
Apr 27, 2015, 1:22:01 PM4/27/15
to ang...@googlegroups.com
When you talking about MVC 5 i take it you are talking about ASP.net MVC.
Partial views are used for templates inside your asp framework. All the processing and rendering get done on the server side. 
Angular does all of its rendering inside the browser.

Now You can use angular in the page. There is nothing stopping you from using angular on every page you return from your browser.
You don't have to use the router. in the new releases the UI-Router is a separate js file because it is up to the developer to decide what to import.

Banuprasad S

unread,
Apr 27, 2015, 2:23:40 PM4/27/15
to ang...@googlegroups.com
Yes i'm using ASP.NET MVc 5. The really issue is when we use MVC 5 with multiple pages, the services are no longer singleton and get initialized on each page/view which means i cannot share data across views via services instead i will have use MVC routing to extract the unique id to pull data across the views based on that id. 

Thanks
Banu

Martin Alix

unread,
Apr 28, 2015, 3:37:33 PM4/28/15
to ang...@googlegroups.com
The best amalgamate of .Net and Angular is to have MVC5 serve index.html and all the static files and also serve as a REST API server (using Web API 2.x)
Angular then manages the routing and the multiple pages and views.
The only use for MVC 5's multiple pages could be for anonymous vs. authenticated, et. al.

Gustavo Cruz

unread,
Apr 29, 2015, 1:46:54 PM4/29/15
to ang...@googlegroups.com
My two cents:

My recommendation is: Don't use this approach. Every project I worked that mixes angular and asp.net MVC had a lot of problems. Angular is about to manage data on the server side, not the DOM. If are you going to use MVC, it's better to use jQuery and Razor.

Sure, you can use angular with regular MVC, but I recommend use WebAPI instead, if you want to use all of the power of angular.

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

Michael Powell

unread,
Apr 30, 2015, 5:09:04 AM4/30/15
to ang...@googlegroups.com
I tend to concur with: don't. I tried to run a couple of experiments myself, and I agree routing will be horribly confused, etc. Ng is a fine pairing with webapi, though, which could be .NET C# or anything else, erlang for that matter. So long as you agree on the serialization. I was passing first class view models in and returning objects back no problem.

Martin Alix

unread,
Apr 30, 2015, 10:19:38 AM4/30/15
to ang...@googlegroups.com

stuar...@justenough.com

unread,
May 4, 2015, 3:14:42 PM5/4/15
to ang...@googlegroups.com
I've actually got mine setup such that the MVC controllers respond to all url requests, which then gets passed to the Angular ui-router. Each controller has its own Angular module. So, in this case, the editor angular module would take care of the editor routes. The advantage here is that you get to split a large program up into smaller modules. I only separate the modules when I know there is nothing to share between them, and to possibly save on memory, as Angular is known to be very memory consuming.

routes.MapRoute(
    name: "Dashboard",
    url: "dashboard",
    defaults: new { controller = "Dashboard", action = "Index" });


routes.MapRoute(
      name: "Editor",
      url: "{*url}",
      defaults: new { controller = "Home", action = "Index" });
Reply all
Reply to author
Forward
0 new messages