CODEWITHSUNDEEP
c#asp.net-mvcangularjs
allencoded
allencoded

Reputation: 7275

C# Web API routing mixed with Angular routing

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

Upvotes: 7

Views: 7797

Answers (1)

Darshan P
Darshan P

Reputation: 2241

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

Upvotes: 6

Related Questions