在这篇文章中，你将学习如何利用有棱角的材料来创造美丽和现代的角度应用。你将从头开始，安装节点.js以及Angular CLI（如果您还没有它们），那么您将安装和配置使用Angular Material开发所需的依赖项。您可以在GitHub存储库中找到本文中开发的最终代码。那么，到底什么是有角的材料？Angular Material是一个用于Angular项目的第三方软件包，通过对卡片、漂亮的输入、数据表等常见组件的再利用来促进开发过程。可用组件的列表很大，并且随着我们的发言继续增长。因此，要获得完整的组件参考示例，请访问官方网站。使用Angular，整个应用程序是由组件组成的，而不是从组中构建和设置组件样式，您可以使用Angular Material，它提供符合材质设计规范的现成样式组件。Google在Android操作系统中使用了这个规范，由于其漂亮的UI实用程序，它在web上也非常流行。角度材质教程这篇文章的目的是通过一个实践练习来教你如何使用有棱角的材料。首先，您将检查您的计算机上所需的依赖关系，以便使用和开发角度材质，然后您将学习如何配置和使用不同的组件。设置角度环境要使用Angular，您需要节点.js以及安装在开发环境中的Angular CLI（命令行界面）。节点.js将提供CLI和开发服务器所需的包，以便您可以实时检查进度。Angular CLI是帮助您创建新Angular项目和配置Angular组件、服务等的工具。你需要它，因为角度项目不仅仅是HTML和脚本文件。也就是说，angular项目使用TypeScript，需要对其进行转换和优化以运行浏览器。如果没有Angular CLI，您将需要设置和连接许多工具来协同工作，这将消耗太多时间。如果你没有节点.js安装在您的计算机上，继续到下载页并按照那里的说明操作（或使用像N，a这样的工具节点.js版本管理器可以轻松安装多个版本）。然后，安装后节点.js，使用NPM（随附节点.js)要安装Angular CLI，请执行以下操作：npm安装-g@angular/cli注意：根据计算机的设置，您可能需要使用sudo来使用-g（全局）标志。创建角度项目两者兼有节点.js如果Angular CLI正确安装在计算机上，则可以使用以下命令设置新的Angular项目：#在"角度材质教程"下创建新的角度项目ng新角度材质教程#进入新项目cd角度材质教程第一个命令将生成一个目录/文件（在一个名为angular material tutorial的新目录下）结构，其中包含一组需要的文件，以便您可以创建角度应用程序。要了解此结构的详细信息，请查看Angular CLI文档。第二个命令将把终端移动到项目根目录中。安装角材要将角度材质作为项目的依赖项安装，请运行以下命令：npm安装@角度/材料@角度/cdk目前，您不会对项目的源代码进行任何更改。首先，您将安装一些更酷的依赖项。有棱角的材质主题安装角度材质后，将配置一个主题，该主题定义将在角度材质组件中使用的颜色。要配置基本主题，请打开src/样式.css将以下代码归档并粘贴到其中：@导入"~@angular/material/prebuild themes/indigo-粉红色.css";顺便说一句，如果您不知道在使用Angular开发时使用什么IDE（集成开发环境），visualstudio代码是一个很好的（而且免费的）替代品。有棱角的材料手势一些组件（如滑动切换、滑块和工具提示）依赖于名为HammerJS的库来捕获触摸手势。因此，您需要安装HammerJS并将其加载到我们的应用程序中。为此，请从项目根目录运行：#从角度材质教程npm安装hammerjs安装后，在src的顶部添加以下行/主.ts文件：导入'hammerjs'；材质图标另一个很酷的东西添加到你的项目是材质图标库。要访问这个巨大的图标库，请更新src/索引.html文件如下：在你会用有棱角的材料做什么在设置了角度项目结构和一些依赖关系之后，您就可以开始开发应用程序了。在本文中，为了通过实践练习学习角度材料，您将为博客引擎开发一个仪表板，用户可以在其中插入新帖子并删除现有帖子。这将不是一个具有后端持久性或增强功能的成熟应用程序。这里的想法是展示使用有棱角的材料是多么的酷和容易。"我正在通过实践练习来学习角度材料！"在推特上留言导入材料组件您要做的第一件事是创建一个名为材料.模块.ts在./src/app目录中。在该文件中，您将添加以下代码：从"@angular/core"导入{NgModule}；@NG模块({进口：【】，出口：【】})导出类MaterialModule{}创建一个新的角度模块（@NgModule）的想法是将从Angular Material导入的内容集中到一个文件中。因此，在这个文件中添加角度材质组件之前，您需要在主模块（即./src/app）中导入和配置它/应用程序模块.ts文件）如下：// ... 其他导入语句。。。从"@angular/platform browser/animations"导入{BrowserAnimationsModule}；从""导入{MaterialModule}/材料.模块';@NG模块({// ... 声明属性。。。进口：[浏览器模块，浏览器动画模块，材料模块，],// ... 提供程序和引导属性。。。})导出类AppModule{}注意：你还添加了BrowserAnimationsModule，这样你的应用程序就可以依靠一些很酷的动画功能（比如点击按钮时的阴影）。角度材料侧导航在定义了一个导入角度材质组件的集中位置后，您可以集中精力在应用程序中添加导航栏。为此，您将更新./src/app/材料.模块.ts看起来像这样：从"@angular/core"导入{NgModule}；进口{MatSidenavModule公司，Mattoolbar模块，MatIconModule公司，MatListModule，}从"@角度/材料"；@NG模块({进口：[MatSidenavModule公司，Mattoolbar模块，MatIconModule公司，MatListModule，],出口：[MatSidenavModule公司，Mattoolbar模块，MatIconModule公司，MatListModule，]})导出类MaterialModule{}此更改将使MatSidenavModule在应用程序中可用。现在，您可以更新应用程序模板（./src/app/app.component.html)要使用此组件：输入登录在主页主页在仪表板仪表板在输入注销在菜单