C# Web API routing mixed with Angular routing

Question

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

Darshan P · Accepted Answer · 2014-08-15 13:22:25Z

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" })

edited Aug 15, 2014 at 13:22

answered Aug 15, 2014 at 1:42

Darshan P

2,24119 silver badges16 bronze badges

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

3 Comments

allencoded Over a year ago

so you're saying point $routeprovider templateUrls to the c# routes? Do you have any examples?

allencoded Over a year ago

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 Over a year ago

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

Collectives™ on Stack Overflow

C# Web API routing mixed with Angular routing

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related