7

Is it possible to make an MVC application use routing only form WEB API, but then allow angular to do the rest of the routing using its routeprovider? When I run my application I get:

GET http://localhost:8080/Views/Home/Index.html 404 (Not Found)

MVC Route RouteConfig.Cs

 // serves plain html
        routes.MapRoute(
             name: "DefaultViews",
             url: "view/{controller}/{action}/{id}",
             defaults: new { id = UrlParameter.Optional }
        );

        // Home Index page have ng-app
        routes.MapRoute(
            name: "AngularApp",
            url: "{*.}",
            defaults: new { controller = "Home", action = "Index" }
        );

WebAPIConfig.cs

config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{id}",
                defaults: new { id = RouteParameter.Optional }
            );

C# Controller (trying multiple things)

public ActionResult Index()
{
    ViewBag.Title = "Home Page";

    return View();
}

public ActionResult Test()
{
    var result = new FilePathResult("~/Views/Home/test.html", "text/html");
    return result;
}

public ActionResult Show()
{
    ViewBag.Title = "HomePage";

    return View();
}

Angular routing:

   app.config(function ($routeProvider, $locationProvider) {
    $locationProvider.html5Mode(true);
    $routeProvider
        .when("/Tests", { templateUrl: "Views/Home/test.html", controller: "homeCtrl" })
        .when("/Shows", { templateUrl: "/Home/Show.cshtml", controller: "homeCtrl" })
        .otherwise({ redirectTo: "/" });
});

Picture of file structure for Reference:

enter image description here

EDIT: GitHub working example: https://github.com/allencoded/CSharpAngularRouting

allencoded
  • 7,015
  • 17
  • 72
  • 126

1 Answers1

6

You should use MVC 4/5 to generate all view for your angular app. Your home page can initializes angular app then in your routes, you can use mvc url for your views with layout set to null.

EDIT:

Create Web Api Project Add this in RouteConfig.cs

// serves plane html
routes.MapRoute(
     name: "DefaultViews",
     url: "view/{controller}/{action}/{id}",
     defaults: new { id = UrlParameter.Optional }
);

// Home Index page have ng-app
routes.MapRoute(
    name: "AngularApp",
    url: "{*.}",
    defaults: new { controller = "Home", action = "Index" }
);

_ViewStart.cshtml

@{
    Layout = null;
 }

HomeController Index action page will be your angular home page and all other can be your angular partial views.

EDIT:

Your template url in angular is wrong. When angular try to load template mvc will return home page template (that have ng-app) so it will initialize again and you can only initialize ng-app one time.

Change your template url to /view/{controller/{action}

 .when("/Tests", { templateUrl: "view/Home/test", controller: "homeCtrl" })
Darshan P
  • 2,241
  • 18
  • 16
  • so you're saying point $routeprovider templateUrls to the c# routes? Do you have any examples? – allencoded Aug 15 '14 at 01:58
  • I made edits to my question my code above looks like that. When I try to go to those routes they seem to be stuck in a infinite loop or something it kills the browser. – allencoded Aug 15 '14 at 06:01
  • Ah I see I tried what you had above it never worked but I was doing Views/Home/test....when I changed it to "view/Home/test" it worked provided my test is a test.cshtml – allencoded Aug 15 '14 at 14:05