C#Web API路由与Angular路由混合 [英] C# Web API routing mixed with Angular routing

问题描述

是否可以使MVC应用程序仅通过WEB API使用路由，然后允许angular使用其routeprovider完成其余路由?当我运行我的应用程序时，我得到:

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路由RouteConfig.Cs

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

WebAPIConfig.cs

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

C#控制器(尝试多种操作)

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();
}

角度布线:

   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: "/" });
});

供参考的文件结构图:

GitHub工作示例: https://github.com/allencoded/CSharpAngularRouting

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

推荐答案

您应使用MVC 4/5为您的角度应用程序生成所有视图.您的首页可以初始化angular应用，然后在您的路线中使用mvc url作为布局设置为null的视图.

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.

创建Web Api项目，将其添加到RouteConfig.cs

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

_ViewStart.cshtml

@{
    Layout = null;
 }

HomeController索引操作页面将是您的角度主页，其他所有页面都将是您的角度局部视图.

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

您的模板URL中的角度错误.当有角尝试加载模板时，mvc将返回具有ng-app的主页模板，因此它将再次初始化，并且您只能一次初始化ng-app.

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.

将模板网址更改为/view/{controller/{action}

 .when("/Tests", { templateUrl: "view/Home/test", controller: "homeCtrl" })

这篇关于C#Web API路由与Angular路由混合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！