16、构建基于GraphQL和Apollo的Angular待办事项应用

构建基于GraphQL和Apollo的Angular待办事项应用

1. 启动服务器

当服务器端代码编写完成后，添加 new MyApp().Start(); 来启动并运行应用程序。构建并运行服务器端代码时，会在 http://localhost:3000 上启动一个支持Apollo的GraphQL服务器实例。

在Apollo服务器选项中，设置 playground: true 会开启一个可视化编辑器区域，可在其中运行GraphQL查询并查看结果。不过在生产代码中，建议关闭该功能，而在测试时，它是测试查询的宝贵工具。

为验证配置是否正确，可在查询窗口输入以下示例GraphQL查询：

query {
  TodoItems {
    Id
    Title
    Description
    Completed
    DaysCreated
  }
}

2. 创建GraphQL Angular客户端

使用 ng new 命令创建一个新的Angular应用，并设置前缀为 atp ，同时添加路由支持：

ng new Chapter05 --style scss --prefix atp --routing true

添加对Angular Material的支持，执行以下命令