c# - Angular 4 访问数据库模型

Question

我目前正在学习 Angular 4，我的任务是创建组织结构图可视化。我找到了多种选择，我选择了这个 one .我选择它是因为它使用了我也应该使用的 SQL 数据库。对我来说唯一的问题是因为该项目是用 AngularJS 编写的，所以我必须将它迁移到 Angular 4，但我没有想出正确的方法。

我正在使用 Visual Studio 2015，空的 ASP.NET Web 应用程序项目和 MVC 文件夹布局，这是我到目前为止所做的:

1. 常规的 Angular 设置(npm 安装、AppModule 引导...)
2. 我有一个正在运行的数据库并创建了一个 ADO 模型。
3. 我在 Controllers 文件夹中有一个 HomeController.cs。

HomeController.cs

using Pas.Angular.OrgChart.Models;

namespace Pas.Angular.OrgChart.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index()
        {
            return View();
        }

        public JsonResult GetEmployees()
        {
            List<Employees> emp = new List<Employees>();
            using (EmployeesDBEntities dc = new EmployeesDBEntities())
            {
                emp = dc.Employees.OrderBy(a => a.PositionID).ToList();
            }
            return new JsonResult
            {
                Data = emp,
                JsonRequestBehavior = JsonRequestBehavior.AllowGet
            };
        }
    }
}

1. 我有一个 employees.service.ts，我试图在其中获取一个包含员工的 JSON 对象。

employees.service.ts

import { Injectable } from "@angular/core";
import { Headers, Http } from "@angular/http";

import "rxjs/add/operator/toPromise";

@Injectable()
export class EmployeesService {
    private headers: Headers;
    private baseUrl = "/Home/GetEmployees" // Question no. 1


    constructor(private http: Http) {
       // Question no. 2
    }

    getEmployees(): Promise<JSON[]> {
        return this.http.get(this.baseUrl) // Question no. 2
            .toPromise()
            .then(response => response.json())
            .catch(this.handleError);
    }

    private handleError(error: any): Promise<any> {
        console.log("An error has occurred: ", error);
        return Promise.reject(error.message || error);
    }
}

RouteConfig.cs

namespace Pas.Angular.OrgChart
{
    public class RouteConfig
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
            );
        }
    }
}

1. 我的文件夹结构是这样的

附加信息:

1. EmployeesService 在 AppModule 中注册为提供者
2. EmployeesComponent 在初始化时调用服务方法 getEmployees()。
3. 这段代码只是一个 POC，我只想记录一个 JSON 输出。
4. 到目前为止我唯一的输出是:ERROR Error: Uncaught (in promise): Response with status: 404 Not Found for URL: http://localhost:3002/Home/GetEmployees

我的问题是(指的是代码中的数字):

1. 我如何检查此 URL 是否正确，如果不正确，我应该将其更改为哪个 url？
2. 我需要标题吗？我看到了一些如何初始化它们的方法，但这只是对我来说没有任何意义。
3. 是否还有其他我遗漏但我没有意识到的东西？

最后的笔记:

使用顶部链接中的教程，我能够运行它，所以我猜我的数据库和数据库模型没问题。如果您认为这个问题缺少一些重要信息，请在评论中告诉我，我会添加。正如我之前提到的，我是 Angular 的新手，我可能会忽略一些重要的东西。

Answer 1

您应该仔细研究属性路由以及如何创建适当的 REST-ful API。 Employee 实体应该有自己的 Controller ，而不是嵌套在 Home-controller 中。

您现在面临的问题是由于路径 GetEmployees 不可用，因为您的 HomeController 上已经定义了一个默认的 GET 方法(Index() 方法)。

在Controllers 文件夹中添加一个新的EmployeesController，并将GetEmployees 方法放在那里。这样，您就可以使用 http://localhost:3002/Employees 之类的调用以 REST-ful 方式获取所有员工。 来吸引所有员工，这也与 Angular 2 服务的构建方式产生了更好的共鸣。 (我猜你指的是 Angular 2 而不是 4，对吧？)