[AngularJS] How to use ASP.NET MVC and AngularJS routing?

[gsrjedi]

I’m working on a new ASP.NET MVC and AngularJS application that is intended 
to be a collection of SPAs.  I’m using the MVC areas concept to separate 
each individual SPA, and then I’m using AngularJS within each MVC area to 
create the SPA.

Since I’m new to AngularJS and haven’t been able to find an answer 
regarding combining both MVC and AngularJS routing, I thought I’d post my 
question here to see if I could get some help.

I have the standard MVC routing setup, which serves up each MVC area.

        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
            routes.MapMvcAttributeRoutes();
            routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "Home", action = "Index", id = 
UrlParameter.Optional }
            );
            routes.AppendTrailingSlash = true;
        }

This works fine and gives me URLs like:

http://localhost:40000/Application1/
http://localhost:40000/Application2/

Now, within each application area, I’m trying to use AngularJS routing, 
also using $locationProvider.html5Mode(true); so that I get the client-side 
routing within each area, something like:

http://localhost:40000/Application1/view1
http://localhost:40000/Application1/view2
http://localhost:40000/Application2/view1/view1a
http://localhost:40000/Application2/view2/view2a
http://localhost:40000/Application2/view3

Here’s my AngularJS routing snippet for Application1:

    app1.config(['$routeProvider', '$locationProvider', function 
($routeProvider, $locationProvider) {
        var viewBase = '/Areas/Application1/app/views/';
        $routeProvider
            .when('/Application1/view1', {
                controller: 'View1Controller',
                templateUrl: viewBase + 'view1.html'
            })
            .when('/Application2/view2', {
                controller: 'View2Controller',
                templateUrl: viewBase + 'view2.html'
            })
            .otherwise({ redirectTo: '/Application1/view1' });
        $locationProvider.html5Mode(true);
    }]);

So, initially, it seems to work (at least the URL looks correct).  But, 
when I start navigating between areas or views within an area, or even if I 
refresh, something gets “lost” and things don’t work.  The URL still looks 
correct but views aren’t found and aren’t getting loaded correctly.

Any help/guidance on how to make ASP.NET MVC and AngularJS routing work 
together to give me the scenario described above?

Thanks!!!


-- 
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+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.