本章将讨论以下内容 ToTestAngular7Project ToBuildAngular7Project 测试Angular7项目 在项目设置过程中，已经安装了所需的测试软件包。为每个新组件，服务，指令等创建一个.spec.ts文件。 要运行测试用例，使用的命令如下 ngtest 以下是app.component.ts的app.component.spec.ts文件 import{TestBed,async}from'@angular/core/testing'; import{RouterTestingModule}from'@angular/router/testing'; ...

在本章中，无涯教程将讨论事件绑定在Angular7中的工作方式，当用户以键盘移动，鼠标单击或鼠标悬停的形式与应用程序交互时，它将生成一个事件。需要处理这些事件以执行某种操作，让无涯教程考虑一个示例以更好地理解这一点。 app.component.html <!--Thecontentbelowisonlyaplaceholderandcanbereplaced.--> <divstyle="text-align:center"> <h1>Welcometo{{title}}.</h1> </div> <div>Mo...

HttpClient将帮助我们提供POST，GET相关方法，使用时需要导入http模块。我们需要将模块导入app.module.ts中，如下所示 import{BrowserModule}from'@angular/platform-browser'; import{NgModule}from'@angular/core'; import{AppRoutingModule,RoutingComponent}from'./app-routing.module'; import{AppComponent}from'./app.component'; import{NewCmpComponen...

我们可能遇到一种情况，需要在页面上的任何地方共用一些代码，它可用于需要在组件之间共享的数据连接。 要创建服务，我们需要使用以下命令行 nggservicemyservice C:\projectA7\angular7-app>nggservicemyservice CREATEsrc/app/myservice.service.spec.ts(348bytes) CREATEsrc/app/myservice.service.ts(138bytes) 在app文件夹中创建的文件如下 以下是创建的文件，这些文件显示在底部–myservice.service.specs.ts和mys...

Materials为您的项目提供了许多内置模块。autocomplete，datepicker，slider，menus，grids和toolbar等函数。 要使用Materials，我们需要导入包装。Angular2也具有上述所有函数，但可以作为@angular/core模块的一部分使用。从Angular4开始，Materials模块提供了一个单独的模块@angular/materials。这有助于用户仅将所需materials导入他们的项目中。 要开始使用Materials，您需要安装两个软件包:materials和cdk。Materials组件取决于动画模块的高级函数。因此，您需要...

Angular中的指令是一个js类，它声明为@directive。我们在Angular中有3个指令。指令在下面列出 Component指令 这些构成了主要类，其中包含有关如何在运行时处理(processed)，实例化(instantiated)和使用组件的详细信息。 Structural指令 结构指令基本上是处理dom元素，结构性指令在指令之前带有符号。如，ngIf和ngFor。 Attribute指令 属性指令处理更改dom元素的外观和行为，您可以按照以下部分中的说明创建自己的指令。 自定义指令 在本节中，我们将讨论要在组件中使用的自定义指令。 让我们看看如何创建自定义指令，使用命令行...

Angular7是一个开放源代码JavaScript框架，用于在JavaScript, html 和Typescript(JavaScript的超集)中构建Web应用程序和应用程序。Angular为animation，httpservice和materials提供了内置功能，这些功能又具有auto-complete，naigation，toolbar，menus等功能。代码以Typescript编写，可编译为JavaScript，并在JavaScript中显示。 Angular7的应用 如前所述，Angular7是网络上使用最广泛的语言之一。无涯教程将在这里列出其中一...

这是Angular7中新增的称为虚拟滚动的新函数之一，虚拟滚动向用户显示可见的dom元素，随着用户滚动，将显示列表。由于不会一次加载完整列表，而是仅根据屏幕上的可见性加载，因此可以提供更快的体验。 虚拟滚动模块 考虑一下您的UI列表很大，将所有数据一起加载会带来性能问题，Angular7虚拟滚动的新函数负责加载用户可见的元素，当用户滚动时，将显示用户可见的下一个dom元素列表。这样可以提供更快的体验，并且滚动也非常流畅。 让我们将依赖项添加到我们的项目中 npminstall@angular/cdk–save 我们已经完成了对虚拟滚动模块的依赖关系的安装。 我们将通过一个示例来更好地理...

Animations在html元素之间增加了很多交互，Angular2可以使用动画，从Angular4开始，动画不再是@angular/core库的一部分，而是一个单独的程序包，需要将其导入app.module.ts中。 首先，我们需要使用下面的代码行导入库 import{BrowserAnimationsModule}from'@angular/platform-browser/animations'; 需要将BrowserAnimationsModule添加到app.module.ts中的导入数组，如下所示 import{BrowserModule}from'@angular/pla...

AngularCLI命令可帮助我们非常快速地创建和启动项目。 npminstall-g@angular/cli 要创建一个新项目，我们可以在命令行中运行以下命令，然后将创建该项目。 ngnewPROJECT-NAME cdPROJECT-NAME ngserve ngserve//将编译，您可以在浏览器中看到项目的输出 http://localhost:4200/ 创建新项目时，默认端口为4200。您可以使用以下命令更改端口 ngserve--host0.0.0.0--port4201 Angular更新命令 如果您想更新应用程序及其依赖关系，可以使用以下命令 ngupdate@angu...

路由(Routing)基本上意味着在页面之间导航，现在让我们创建一个组件，看看如何在其上使用路由。如下所示 app.module.ts import{BrowserModule}from'@angular/platform-browser'; import{NgModule}from'@angular/core'; import{AppRoutingModule}from'./app-routing.module'; import{AppComponent}from'./app.component'; import{NewCmpComponent}from'./new-cmp/new-c...