angular 1.7.5_Angular 7.0的新功能以及如何升级

angular 1.7.5

介绍 (Introduction)

Angular has released its latest version, Angular 7.0. In this article, we will explore the following points:

Angular发布了最新版本Angular 7.0。 在本文中，我们将探讨以下几点：

• What is new in Angular 7.0
  Angular 7.0的新功能
• Creating your first Angular 7.0 application using Angular CLI
  使用Angular CLI创建第一个Angular 7.0应用程序
• How to update your existing Angular application to Angular 7.0
  如何将现有的Angular应用程序更新为Angular 7.0

Angular 7.0的新功能是什么？ (What’s new in Angular 7.0?)

1. While creating a new Angular application, the Angular CLI will prompt the user to select if they want to add features like Angular routing or the format of the stylesheet they want to use in their application
   在创建新的Angular应用程序时，Angular CLI将提示用户选择是否要添加功能，例如Angular路由或要在其应用程序中使用的样式表格式

2. Angular 7.0 applications will use the Bundle Budget feature of Angular CLI. This will warn developers if the application bundle size exceeds the predefined limit. The default value for the warning is set to 2MB, and for errors it is 5MB. This value is configurable and can be changed from the angular.json file. This feature enhances the application’s performance considerably.

   Angular 7.0应用程序将使用Angular CLI的捆绑包预算功能。 如果应用程序捆绑包大小超出预定义的限制，这将警告开发人员。 警告的默认值设置为2MB，错误的默认值为5MB。 该值是可配置的，可以从angular.json文件中进行更改。 此功能大大提高了应用程序的性能。

3. The Component Dev Kit (CDK) of Angular Material also receives some new features as part of this update. The two newly added feature of the CDK are:
   作为此更新的一部分，Angular Material的组件开发套件(CDK)也获得了一些新功能。 CDK的两个新增功能是：

• Virtual Scrolling If you are trying to load a large list of elements, then it can affect the application’s performance. The <cdk-virtual-scroll-viewport> tag can be used to load only the visible part of the list on the screen. It will render only the items that can fit on the screen. When a user scrolls through the list then the DOM will load and unload the elements dynamically based on the display size. This feature is not to be confused with infinite scrolling which is altogether a different strategy to load elements. You can read more about Virtual Scrolling here.

  虚拟滚动如果您尝试加载大量元素，则可能会影响应用程序的性能。 <cdk-virtual-scroll-viewport>标记可用于仅加载列表在屏幕上的可见部分。 它将仅渲染屏幕上可以容纳的项目。 当用户滚动列表时，DOM将根据显示大小动态加载和卸载元素。 此功能不应与无限滚动混淆，后者是加载元素的完全不同的策略。 您可以在此处阅读有关虚拟滚动的更多信息。

• Drag and Drop

  拖放

  We can easily add the drag and drop feature to an item. It supports features such as free dragging of an element, reordering items of a list, moving items between list, animation, adding a custom drag handle, and restricted dragging along X or Y axis. You can read more about Drag and Drop

  我们可以轻松地将拖放功能添加到项目中。 它支持的功能包括：元素的自由拖动，列表项的重新排序，列表项之间的移动，动画，添加自定义拖动手柄以及沿X或Y轴的受限拖动。 您可以阅读有关拖放的更多信息

  here.

  在这里 。

4. The mat-form-field will now support the use of the native select element. This will provide enhanced performance and usability to the application. Read more about this feature here.

4.现在， mat-form-field将支持使用本机select元素。 这将为应用程序提供增强的性能和可用性。 在此处阅读有关此功能的更多信息。

5. Angular 7.0 has updated its dependencies to support Typescript 3.1, RxJS 6.3 and Node 10.

5. Angular 7.0更新了其依赖项以支持Typescript 3.1，RxJS 6.3和Node 10。

Now we will proceed to create our first Angular 7 application.

现在，我们将继续创建第一个Angular 7应用程序。

先决条件 (Prerequisites)

• Install the latest version of Node.js from here

  从这里安装最新版本的Node.js

• Install Visual Studio Code from here

  从这里安装Visual Studio Code

Installing Node.js will also install npm on your machine. After installing Node.js, open the command prompt. Run the following set of commands to check the version of node and npm installed on your machine.

安装Node.js还将在您的计算机上安装npm。 安装Node.js之后，打开命令提示符。 运行以下命令集以检查计算机上安装的node和npm的版本。

• node -v
  节点-v
• npm -v
  npm -v

Refer to the image below:

请参考下图：

安装Angular CLI (Installing Angular CLI)

Angular CLI is the Command Line interface for Angular. It helps us to initialize, develop and maintain Angular applications easily.

Angular CLI是Angular的命令行界面。 它帮助我们轻松地初始化，开发和维护Angular应用程序。

To install Angular CLI, run the following command in the command window:

要安装Angular CLI，请在命令窗口中运行以下命令：

npm i -g @angular/cli

This will install Angular CLI 7.0 globally in your machine. Refer to the image below:

这将在您的计算机中全局安装Angular CLI 7.0。 请参考下图：

To check the version of angular CLI installed in your machine, run the following command:

要检查计算机中安装的angular CLI的版本，请运行以下命令：

Refer to the image below:

请参考下图：

创建Angular 7应用 (Create the Angular 7 app)

Open Visual Studio Code and navigate to View >> Terminal. This will open the VS code terminal window. Alternatively, you can also use the keyboard shortcut ctrl+` to open the terminal window.

打开Visual Studio代码，然后导航到“ View >> Te终端”。 这将打开VS代码终端窗口。 或者，您也可以使用键盘rtcut ctrl +`打开终端窗口。

Type the following sequence of commands in the terminal window. These commands will create a directory named “ng7Demo”. Then create an Angular application with the name “ng7App” inside that directory.

在终端窗口中键入以下命令序列。 这些命令将创建一个名为“ ng7Demo”的目录。 然后在该目录中创建一个名称为“ ng7App”的Angular应用程序。

• mkdir ng7Demo
  mkdir ng7Demo
• cd ng7Demo
  光盘ng7Demo
• ng new ng7App
  ng新的ng7App

As you run the ng new command, the Angular CLI will ask you to make selections in the following two options:

当您运行ng new命令时，Angular CLI将要求您在以下两个选项中进行选择：

1. Would you like to add Angular routing? (y/N)
   您想添加角度路由吗？ (是/否)
2. Which stylesheet format would you like to use?
   您想使用哪种样式表格式？

Once you select the options and hit enter, the Angular 7.0 application will be created.

选择选项并按Enter后，将创建Angular 7.0应用程序。

Refer to the below Gif for better understanding.

请参阅下面的Gif以获得更好的理解。

Once the application is created successfully, run the following command to open the project:

成功创建应用程序后，运行以下命令以打开项目：

• code .
  代码。

Refer to the image below:

请参考下图：

This will open the code file of our application in a new VS Code window. You can see the following file structure in Solution Explorer.

这将在新的VS Code窗口中打开我们应用程序的代码文件。 您可以在解决方案资源管理器中看到以下文件结构。

Open the package.json file and you can observe that we have the latest Angular 7.0.0 packages installed in our project.

打开package.json文件，您会发现我们的项目中安装了最新的Angular 7.0.0软件包。

{
  "name": "ng7-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~7.0.0",
    "@angular/common": "~7.0.0",
    "@angular/compiler": "~7.0.0",
    "@angular/core": "~7.0.0",
    "@angular/forms": "~7.0.0",
    "@angular/http": "~7.0.0",
    "@angular/platform-browser": "~7.0.0",
    "@angular/platform-browser-dynamic": "~7.0.0",
    "@angular/router": "~7.0.0",
    "core-js": "^2.5.4",
    "rxjs": "~6.3.3",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.10.0",
    "@angular/cli": "~7.0.1",
    "@angular/compiler-cli": "~7.0.0",
    "@angular/language-service": "~7.0.0",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.1.1"
  }
}

执行演示 (Execution Demo)

The name of our Angular application is ng7App which is inside the ng7Demo directory.

我们的Angular应用程序的名称是ng7App ，它位于ng7Demo目录中。

So, we will first navigate to our application using the below commands.

因此，我们将首先使用以下命令导航到我们的应用程序。

• cd ng7Demo
  光盘ng7Demo
• cd ng7App
  光盘ng7App

Now, we use the following command to start the web server.

现在，我们使用以下命令来启动Web服务器。

• ng serve
  ng服务

Refer to the image below:

请参考下图：

After running this command, you can see that it is asking to open http://localhost:4200 in your browser. So, open any browser on your machine and navigate to this URL. Now, you can see the following page.

运行此命令后，您可以看到它要求在浏览器中打开http://localhost:4200 。 因此，打开计算机上的所有浏览器并导航到该URL。 现在，您可以看到以下页面。

如何升级到Angular 7 (How to upgrade to Angular 7)

The angular team has provided an Angular Update Guide to ensure the smooth upgrade of angular versions. Navigate to https://update.angular.io/ to access it. It is a self-explanatory and easy to use application. It will show you the steps that you need to follow before updating, during the update and after the update. Refer to the image below:

角度团队提供了《角度更新指南》，以确保角度版本的顺利升级。 导航到https://update.angular.io/进行访问。 这是一个不言自明且易于使用的应用程序。 它将显示更新之前，更新期间和更新之后需要执行的步骤。 请参考下图：

If you want to update your application from Angular 6 to Angular 7 then run the following command in the project folder:

如果要将应用程序从Angular 6更新到Angular 7，请在项目文件夹中运行以下命令：

ng update @angular/cli @angular/core

结论 (Conclusion)

We have learned about the new features of Angular 7.0. We also installed Angular CLI 7.0. To create and execute an Angular 7.0 app we have used Angular CLI and VS Code. We also explored the method to upgrade an existing application to Angular 7.0.

我们已经了解了Angular 7.0的新功能。 我们还安装了Angular CLI 7.0。 为了创建和执行Angular 7.0应用程序，我们使用了Angular CLI和VS Code。 我们还探讨了将现有应用程序升级到Angular 7.0的方法。

也可以看看 (See Also)

• Getting Started With Angular 6.0

  Angular 6.0入门

• Understanding Angular 6 Animations

  了解Angular 6动画

• Getting Started With Angular 5 Using Visual Studio Code

  使用Visual Studio Code Angular 5入门

• CRUD Operations With ASP.NET Core Using Angular 5 And ADO.NET

  使用Angular 5和ADO.NET的ASP.NET Core的CRUD操作

• ASP.NET Core — CRUD Using Angular 5 And Entity Framework Core

  ASP.NET Core —使用Angular 5和实体框架Core的CRUD

• ASP.NET Core — Using Highcharts With Angular 5

  ASP.NET Core —在Angular 5中使用Highcharts

Originally published at https://ankitsharmablogs.com/

最初发布在https://ankitsharmablogs.com/

翻译自: https://www.freecodecamp.org/news/whats-new-in-angular-7-0-and-how-to-upgrade-f2ed22a79e28/

angular 1.7.5