如何开始使用Angular 6.0

了解新功能并构建应用 (Learn what’s new and build an app)

Angular has released its latest version, Angular 6.0. In this article, we will understand the new features of Angular 6.0 and also set up a new project with the help of Angular CLI 6.0 and Visual Studio Code.

Angular发布了最新版本Angular 6.0。 在本文中，我们将了解Angular 6.0的新功能，并借助Angular CLI 6.0和Visual Studio Code来建立一个新项目。

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

ng更新 (ng update)

A new CLI command that will update your project dependencies to their latest versions.

一个新的CLI命令，它将您的项目依赖项更新到最新版本。

ng添加 (ng add)

Another new CLI command that makes adding new capabilities to your project easier.

另一个新的CLI命令，使向项目添加新功能更加容易。

角度元素 (Angular Elements)

This is a new feature that allows us to compile Angular components to native web components which we can use in our Angular app.

这是一项新功能，可让我们将Angular组件编译为可在Angular应用中使用的本机Web组件。

<template>元素已弃用 (<template> element is deprecated)

You can’t use <template> anymore inside of your component templates. You need to use <ng-template> instead.

您不能再在组件模板内部使用<template>。 您需要使用<ng-template>代替。

图书馆支持 (Library support)

Angular CLI now has the support for creating and building libraries. To create a library project within your CLI workspace, run the following command: ng generate library <name> (for example: ng generate library my-demo-lib)

Angular CLI现在支持创建和构建库。 要在CLI工作区中创建库项目，请运行以下命令：ng生成库<名称>(例如：ng生成库my-demo-lib)

角材料启动器组件 (Angular Material Starter Components)

If you run “ng add @angular/material” to add material to an existing application, you will also be able to generate 3 new starter components:

如果运行“ ng add @ angular / material”将材料添加到现有应用程序中，则还可以生成3个新的启动程序组件：

• Material Sidenav

  物料补充

  A starter component including a toolbar with the app name and the side navigation

  入门组件，包括带有应用名称和侧面导航的工具栏

• Material Dashboard

  材料仪表板

  A starter dashboard component containing a dynamic grid list of cards

  入门仪表板组件，其中包含卡的动态网格列表

• Material Data Table

  物料数据表

  A starter data table component that is pre-configured with a datasource for sorting and pagination

  预先配置了用于排序和分页的数据源的入门数据表组件

工作区支持 (Workspace support)

Angular CLI now has support for workspaces containing multiple projects, such as multiple applications and/or libraries.

Angular CLI现在支持包含多个项目的工作区，例如多个应用程序和/或库。

“ .angular-cli.json”文件已被弃用 (The “.angular-cli.json” file has been deprecated)

Angular projects will now use “angular.json” instead of “.angular-cli.json” for build and project configuration.

Angular项目现在将使用“ angular.json”而不是“ .angular-cli.json”进行构建和项目配置。

使用RxJS V6 (Use RxJS V6)

Angular 6 will also allow us to use RxJS V6 with our application.

Angular 6还允许我们在应用程序中使用RxJS V6。

树可晃动的提供者 (Tree Shakable Providers)

Angular 6.0 allows us to bundle services into the code base in modules where they are injected. This will help us to make our application smaller.

Angular 6.0允许我们将服务捆绑到注入它们的模块中的代码库中。 这将帮助我们使应用程序更小。

For example: Earlier, we used to reference our services as below.

例如：之前，我们曾经引用以下服务。

// In app.module.ts    @NgModule({    ...    providers: [MyService]  })  export class AppModule {}    // In myservice.ts     import { Injectable } from '@angular/core';    @Injectable()  export class MyService {    constructor() { }  }

This approach will still work, but Angular 6.0 provides a new and easier alternative to this. We no longer need to add references in our NgModule. We can inject the reference directly into the service. Therefore, we can use the service as below:

这种方法仍然可以使用，但是Angular 6.0提供了一种新的，更容易的替代方法。 我们不再需要在NgModule中添加引用。 我们可以将引用直接注入服务中。 因此，我们可以使用以下服务：

// In myservice.ts    import { Injectable } from '@angular/core';    @Injectable({    providedIn: 'root',  })  export class MyService {    constructor() { }  }

Those are the new features/improvements in the latest release of Angular. Let’s move on and create our first application using Angular 6.0.

这些是Angular最新版本中的新功能/改进。 让我们继续使用Angular 6.0创建第一个应用程序。

先决条件 (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 and 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的版本。

Refer to the below image:

请参考下图：

Now that we’ve installed Node and npm, the next step is to install Angular CLI. Run the following command in a command window. This will install Angular 6.0 CLI globally on your machine.

既然我们已经安装了Node和npm，下一步就是安装Angular CLI。 在命令窗口中运行以下命令。 这将在您的计算机上全局安装Angular 6.0 CLI。

Open VS Code and navigate to View >> Integrated Terminal.

打开VS Code，然后导航到View >> Integrated Terminal。

This will open a terminal window in VS Code.

这将在VS Code中打开一个终端窗口。

Type the following sequence of commands in the terminal window. These commands will create a directory with the name “ng6Demo” and then create an Angular application with the name “ng6App” inside that directory.

在终端窗口中键入以下命令序列。 这些命令将创建一个名为“ng6Demo”的目录，然后创建与该目录中的名称“ng6App”的角度应用。

• mkdir ng6Demo
  mkdir ng6Demo
• cd ng6Demo
  光盘ng6Demo
• ng new ng6App
  ng新的ng6App

There we go — we have created our first Angular 6 application using VS Code and Angular CLI. Now run the following command to open the project.

到此为止-我们已经使用VS Code和Angular CLI创建了第一个Angular 6应用程序。 现在运行以下命令以打开项目。

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窗口中打开我们应用程序的代码文件。 您可以在解决方案资源管理器中看到以下文件结构。

Notice that the folder structure is a little bit different from the older version of Angular. We have a new “angular.json” file instead of the old “.angular-cli.json” file. This config file will still serve the same task as before, but the schema has changed a bit.

请注意，文件夹结构与旧版本的Angular略有不同。 我们有一个新的“ angular.json”文件，而不是旧的“ .angular-cli.json”文件。 此配置文件仍将执行与以前相同的任务，但是架构有所更改。

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

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

{    "name": "ng6-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": "^6.0.0",      "@angular/common": "^6.0.0",      "@angular/compiler": "^6.0.0",      "@angular/core": "^6.0.0",      "@angular/forms": "^6.0.0",      "@angular/http": "^6.0.0",      "@angular/platform-browser": "^6.0.0",      "@angular/platform-browser-dynamic": "^6.0.0",      "@angular/router": "^6.0.0",      "core-js": "^2.5.4",      "rxjs": "^6.0.0",      "zone.js": "^0.8.26"    },    "devDependencies": {      "@angular/compiler-cli": "^6.0.0",      "@angular-devkit/build-angular": "~0.6.0",      "typescript": "~2.7.2",      "@angular/cli": "~6.0.0",      "@angular/language-service": "^6.0.0",      "@types/jasmine": "~2.8.6",      "@types/jasminewd2": "~2.0.3",      "@types/node": "~8.9.4",      "codelyzer": "~4.2.1",      "jasmine-core": "~2.99.1",      "jasmine-spec-reporter": "~4.2.1",      "karma": "~1.7.1",      "karma-chrome-launcher": "~2.2.0",      "karma-coverage-istanbul-reporter": "~1.4.2",      "karma-jasmine": "~1.1.1",      "karma-jasmine-html-reporter": "^0.2.2",      "protractor": "~5.3.0",      "ts-node": "~5.0.1",      "tslint": "~5.9.1"    }  }

The name of our Angular application is ng6app which is inside ng6demo directory.

我们的Angular应用程序的名称是ng6app ，位于ng6demo目录中。

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

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

And then we use the following command to start the web server.

然后我们使用以下命令来启动Web服务器。

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。 现在，您可以看到以下页面。

Now we will try to change the welcome text on the screen. Navigate to /src/app/app.component.ts file and replace the code with the below code.

现在，我们将尝试更改屏幕上的欢迎文本。 导航到/src/app/app.component.ts文件，然后将代码替换为以下代码。

import { Component } from '@angular/core';    @Component({    selector: 'app-root',    templateUrl: './app.component.html',    styleUrls: ['./app.component.css']  })  export class AppComponent {    title = 'Csharp Corner';  }

Now open the browser, you can see that the web page has been updated with new welcome message “Welcome to Csharp Corner!”

现在打开浏览器，您可以看到网页已更新，并带有新的欢迎消息“ Welcome to Csharp Corner！”。

In this article we learned about the new features of Angular 6.0. We have installed the Angular 6.0 CLI and created our first Angular 6.0 application with the help of Visual Studio Code. We have also customized the welcome message on the webpage.

在本文中，我们了解了Angular 6.0的新功能。 我们已经安装了Angular 6.0 CLI，并在Visual Studio Code的帮助下创建了第一个Angular 6.0应用程序。 我们还在网页上自定义了欢迎消息。

You can also find this article at C# Corner.

您也可以在C＃Corner上找到此文章。

You can check my other articles on Angular here

您可以在这里查看我在Angular上的其他文章

Originally published at https://ankitsharmablogs.com/

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

翻译自: https://www.freecodecamp.org/news/how-to-get-started-with-angular-6-0-a196cbfb9bbb/