DR：这是一系列关于如何使用Angular和巢.js. 在第一部分中，您学习了如何使用巢.js. 在第二部分中，您将学习如何使用Angular开发与巢.js. 您可以在GitHub存储库中找到本文中开发的最终代码。"了解如何使用@nestframework和@angular开发完整堆栈@typescriptlang应用程序。"在推特上留言总结第1部分在本系列的第1部分中，您了解了为什么应该将Angular与巢.js使用TypeScript创建全栈web应用程序。然后，大数据技术学什么，你创建了一个巢.js管理餐厅菜单的后端应用程序。这个API有三个端点。一个接受未经验证的请求（GET/items），另一个接受来自经过身份验证的用户的请求（POST/shop cart），第三个只接受经过身份验证的管理员（POST/items）的请求。由于您需要此后端应用程序来支持Angular应用程序，请确保它已启动并正在运行：#移到后端目录cd巢餐厅api#运行服务器npm启动搭建一个角度应用程序为了简化构建Angular应用程序的过程，您将使用Angular CLI工具。安装这个工具只需要Node和NPM，正如您在第一篇文章中所做的那样，您可能已经拥有了Node和NPM。有了这些，您可以打开一个新的终端并运行以下命令来安装Angular CLI：npm安装-g@angular/cli然后，要生成新的Angular应用程序，请移到通常放置项目的目录中，然后运行以下命令：ng新角度餐厅应用程序一段时间后，Angular CLI将生成一个具有以下结构的项目：├── 自述文件.md├── 角度.json├—包装-锁定.json├── 包.json├—src│应用程序│ │ ├── app.component.css│ │ ├── app.component.html│ │ ├── 应用组件规范.ts个│ │ ├── 应用程序组件.ts│ │ └── 应用程序模块.ts│–├—资产│–├—浏览器列表│–├—环境│ │ ├── 环境产品│ │ └── 环境.ts│ ├── 图标文件│ ├── 索引.html│ ├── karma.conf.js│ ├── 主.ts│ ├── 多边形填充.ts│ ├── 样式.css│ ├── 测试.ts│ ├── tsconfig.app.json│ ├── tsconfig.spec.json│ └── tslint.json文件├── tsconfig.json文件└── tslint.json文件在本文中，您将主要创建src/app目录下的代码。在创建的结构中，您将看到一些与自动化测试相关的文件（如测试.ts以及这些名称中有spec的文件）。尽管实现自动化测试非常重要，但在本文中，您将忽略它们，以便更快地实现目标。注意：如果您想了解测试角度应用程序，请查看我们为您准备的这个系列。注意：如果您对每个文件和目录扮演什么角色有疑问，您可以在Angular的文档页面中找到答案。搭建完Angular应用程序后，可以通过发出以下命令使其运行：#进入新的Angular应用程序cd角度餐厅应用程序#启动Angular应用程序并在默认浏览器中打开它ng发球——打开运行这些之后，Angular CLI将在以下位置打开浏览器：本地主机：4200和您将看到这样一个页面：使用Angular开发前端应用程序为了使本文更容易理解，首先，您将开发一个不与后端API交互的角度应用程序。之后，你会把它和你的巢.jsAPI和Auth0（这样您的用户可以进行身份验证）。角引导因为你不想开发一个难看的应用程序，也不想在CSS上花费太多时间，所以你将使用Twitter的引导程序来为你的应用程序提供一些基本的风格。要导入引导，请停止Angular development server并运行以下命令：npm安装引导程序然后，打开src/样式.css文件并添加以下行：@导入"bootstrap/dist/css/bootstrap.css";显示带有角度分量的菜单你要在你的应用程序中实现的第一个功能是视图，未经授权的用户可以查看菜单中的内容。为此，您需要通过在项目根目录中运行以下代码来创建一个新的角度组件：ng生成组件项之后，您将获得一个名为items的新文件夹，其中包含三个主文件（外加一个用于不使用的测试）：items.component.css：在该文件中，您可以为新的角度组件添加一些本地样式。items.component.html：这是要在其中添加HTML代码以构建信息结构的文件。项目.组件.ts：这是要放置控制此组件行为的代码的文件。下一步将创建一个接口（与您在巢.js后端API）在菜单上显示项目。作为你的两个项目（角度的项目和巢.js一）将用这个结构交换数据，你必须在两边定义相同的结构。所以，创建一个名为项目接口.ts在./src/app/items目录下添加以下代码：导出类项目{只读名称：string；只读价格：number；}然后，打开项目.组件.ts文件并将其内容替换为：从"@angular/core"导入{Component，OnInit}；从""导入{Item}/项目.接口';@组件({selector:'应用项目'，模板URL:'/items.component.html',样式URL:['/items.component.css']})导出类ItemsComponent实现OnInit{项目：项目[]=[{name:'披萨'，价格：3},{name:'沙拉'，价格：2}];构造函数（）{}添加开始（）{窗口.警报（"已添加"）；}恩戈尼尼特（）{}}基本上，这个版本的组件是硬编码的一些项目，云计算和大数据的区别，所以你可以看到视图工作。另外，这个版本添加了一个假的addToCart方法，它通过触发一个窗口.警报添加了信息。接下来，您将在HTML页面中添加所需的代码。所以，打开items.component.html文件并将其代码替换为：姓名   价格   行动  
在{{项目名称}}   在${{项目价格}}   在添加到购物车在  
如您所见，上面的代码包含一个HTML表，其中一行（tr）使用了*ngFor Angular指令。此指令使Angular迭代items数组中的每个项，以构建一个表，该表公开项的价格、名称和一个调用addToCart方法的按钮。现在，要显示新组件，大数据行业分析，请打开src/app/app.component.html文件并用以下内容替换所有内容：然后，再次运行项目以检查它是否正常工作：ng发球——打开如果一切正常，您将看到这样的web应用：通过反应角形式添加新项目接下来，您将创建一个反应角度表单，以允许用户将新项目添加到项目数组中。使用Angular的反应式表单可以很容易地验证和测试用户输入的数据。要使用这种类型的表单，首先，需要将Angular的表单组件添加到应用程序模块.ts文件。添加后会是这样：// ... 其他导入语句。。。@NG模块({// ... 声明。。。进口：[浏览器模块，表格模块，反应式模块，],// ... 提供程序和引导。。。})导出类AppModule{}然后，您需要添加一些代码到项目.组件.ts，您将向ItemsComponent类添加一些属性：itemForm（具有formGroup类型）是表单本身；item提交了一个用于验证的布尔值。您还将创建一个向数组添加新项的方法。添加这些后，您的代码将如下所示：从"@angular/core"导入{Component，OnInit}；从""导入{Item}/项目.接口';从'@angular/forms'导入{FormGroup，Validators，FormBuilder}；@组件({selector:'应用项目'，爱返利，模板URL:'/items.component.html',样式URL:['/items.component.css']})导出类ItemsComponent实现OnInit{项目：项目[]=[{name:'披萨'，云服务器比较，价格：3},{name:'沙拉'，价格：2}];itemSubmitted=false；itemForm:FormGroup；构造函数（私有formBuilder:formBuilder）{}添加开始（）{窗口.警报（"已添加"）；}恩戈尼尼特（）{//用字段和所需的验证器初始化表单此.itemForm= this.formBuilder.group({姓名：[''，验证程序。必需]，//名称为必填项价格：[''[验证程序。必需, 验证器.min（0）]]//Price为必输项，必须为正数});}获取getItemForm（）{返回this.itemForm.controls;}添加新项（）{此.item已提交=真；如果(this.itemForm.invalid) {控制台.log(此.itemForm);}其他{this.items.推送(this.itemForm.value);}}}注意：您可以创建一个新的组件来处理表单（例如ItemsForm），但是为了缩短时间，本教程中与项目相关的所有内容都将在同一组件下创建。现在，您需要更新items.component.html文件。在那里，您将添加表示itemForm字段定义的表单的HTML代码。下面的代码片段显示