安装angular cli

Angular is one of the most popular JavaScript frameworks created and developed by Google. In the last couple of years, ReactJS has gained a lot of interest and has become the most popular modern JS library in the industry. But this doesn’t mean Angular is not important anymore.

Angular是Google创建和开发的最受欢迎JavaScript框架之一。 在过去的几年中，ReactJS引起了很多兴趣，并已成为业界最受欢迎的现代JS库。 但这并不意味着Angular不再重要。

On the contrary, Angular is the second most popular framework after React according to Google Trends (world-wide):

相反，根据Google趋势(全球)，Angular是仅次于React的第二受欢迎的框架：

As a front end developer, I have worked with Angular. Now I would like to cover some important features of Angular in my upcoming articles:

作为前端开发人员，我曾与Angular合作。 现在，我想在即将发表的文章中介绍Angular的一些重要功能：

• Part 1: How to install your first App with the Angular CLI (currently you’re here)

  第1部分：如何使用Angular CLI安装第一个应用程序(当前在这里)

• Part 2: Angular Components & String Interpolation

  第2部分： 角度组件和字符串插值

• Part 3: Angular Directives & Pipes

  第3部分 ： 角度指令和管道

• Part 4: One-Way Data Binding in Angular

  第4部分： Angular中的单向数据绑定

• Part 5: Angular Two-Way Data Binding with ngModel

  第5部分： 使用ngModel进行角度双向数据绑定

In the first part of my Angular for Beginners series, you’re going to learn what Angular & Angular CLI is and how to install your first Angular app by using the CLI.

在我的Angular for Beginners系列的第一部分中，您将学习什么是Angular＆Angular CLI以及如何使用CLI安装第一个Angular应用程序。

先决条件 (Prerequisites)

Before starting to learn Angular, I recommend that you become familiar with the following languages if you aren't already:

在开始学习Angular之前，我建议您先熟悉以下语言：

• HTML, CSSHTML，CSS
• JavaScript / ES6JavaScript / ES6
• TypeScript打字稿

If you prefer, you can watch the tutorial video below:

如果愿意，您可以观看下面的教程视频：

什么是角度？ (What is Angular?)

Angular is a JavaScript framework developed and maintained by Google for building front-end applications. Let me start first explaining what a framework is…

Angular是Google开发和维护的用于构建前端应用程序JavaScript框架。 让我首先开始解释什么是框架...

什么是框架？ (What is a Framework?)

A  Framework is a complete package with its own functionalities & libraries. A Framework has its own rules, you don’t have much flexibility and the project is dependent on the Framework you use. Angular is an example of a framework.

框架是具有其自身功能和库的完整软件包。 框架有自己的规则，您没有太多的灵活性，并且项目取决于您使用的框架。 Angular是框架的一个示例。

Angular has released in 2016 but before Angular, there was AngularJS. One of the most asked questions about Angular is that what is the difference between AngularJS and Angular?

Angular已于2016年发布，但在Angular之前有AngularJS。 关于Angular的最常见问题之一是AngularJS和Angular有什么区别？

AngularJS和Angular (AngularJS vs Angular)

These  2 versions of Angular confuse many developers. AngularJS and Angular are completely different frameworks. Angular versions (like 1, 1.2, 1.5,  etc) are called Angular JS and starting from version 2 and above is called Angular.

这两个Angular版本使许多开发人员感到困惑。 AngularJS和Angular是完全不同的框架。 Angular版本(例如1、1.2、1.5等)称为Angular JS，从版本2及更高版本开始称为Angular。

• Angular JS → versions from 1.xAngular JS→版本1.x
• Angular → version 2 and aboveAngular→版本2及更高版本

So  Angular version 2 is a complete rewrite of the AngularJS framework and the newer versions (like 4,5,6 and so on) are minor changes of Angular version 2.

因此，Angular版本2是对AngularJS框架的完全重写，而较新的版本(例如4,5,6等)是Angular版本2的较小更改。

In this article series, you’re going to learn Angular 2+.

在本系列文章中，您将学习Angular 2+。

什么是Angular CLI？ (What is Angular CLI?)

CLI  stands for Command Line Interface. Angular has its own official CLI  that helps us with lots of things during the development process.

CLI代表命令行界面。 Angular拥有自己的官方CLI，可在开发过程中为我们提供许多帮助。

Angular CLI is being used for automating operations in Angular projects rather than doing them manually. CLI supports us, developers, in an Angular project  from beginning to end.

Angular CLI用于自动执行Angular项目中的操作，而不是手动执行操作。 CLI从始至终都在Angular项目中为我们开发人员提供支持。

For example, Angular CLI can be used for:

例如，Angular CLI可用于：

• Configurations, Environment Setup配置，环境设置
• Building components, services, routing system建筑构件，服务，路由系统
• Starting, testing and deploying the project开始，测试和部署项目
• Installing 3rd party libraries (like Bootstrap, Sass, etc.)安装第三方库(例如Bootstrap，Sass等)

and much more. Now let’s see how to install our first Angular App by using the CLI step by step.

以及更多。 现在，让我们逐步了解如何使用CLI安装第一个Angular App。

步骤1：安装NPM(节点程序包管理器) (Step 1: Install NPM (Node Package Manager))

First  of all, we are going to need Node js. NPM (node package manager, is a part of node js) is a tool for installing 3rd party libraries and dependencies to our project. If you don’t have it yet, you can download and install it from here. I have also explained it step by step on the tutorial video.

首先，我们将需要Node js。 NPM(节点程序包管理器，是节点js的一部分)是一个用于将第三方库及其依赖项安装到我们的项目的工具。 如果还没有，可以从这里下载并安装。 我还在教程视频中逐步介绍了它。

步骤2：安装Angular CLI (Step 2: Install Angular CLI)

If you have node js installed, the next step is installing the Angular CLI itself to your computer:

如果您已安装node js，则下一步是将Angular CLI本身安装到您的计算机上：

npm install -g @angular/cli

g stands for global installation. If you use -g later you can use the CLI in any Angular project on your computer.

g代表全局安装 。 如果以后使用-g，则可以在计算机上的任何Angular项目中使用CLI。

Tip: Type ng v to your command-line interface (or terminal) to verify your Angular version.

提示 ：在命令行界面(或终端)上输入ng v以验证您的Angular版本。

步骤3：建立新的Angular专案 (Step 3: Create a new Angular Project)

After the installation is completed, you can use Angular CLI to create a new Angular project with the following command:

安装完成后，可以使用Angular CLI通过以下命令创建新的Angular项目：

ng new my-first-app

This  command creates a new Angular project (named my-first-app, you can use any name) with all the necessary dependencies and files. You don’t have to worry about anything because the CLI does it automatically for you.

此命令将创建一个具有所有必要依赖项和文件的新Angular项目(名为my-first-app，您可以使用任何名称)。 您无需担心任何事情，因为CLI会自动为您执行操作。

步骤4：运行应用 (Step 4: Run the App)

After installing the CLI and creating a new Angular app, the final step is to start the project. To do that, we need to use the following command:

安装CLI并创建新的Angular应用后，最后一步是启动项目。 为此，我们需要使用以下命令：

ng serve -- open

The “open” flag opens your local browser window automatically.

“打开”标志会自动打开本地浏览器窗口。

Angular supports live server, so you can see the changes in your local without refreshing your browser’s page. For more details and updates, check also the official documentation.

Angular支持实时服务器 ，因此您可以在不刷新浏览器页面的情况下查看本地更改。 有关更多详细信息和更新，请参阅官方文档 。

结论 (Conclusion)

So in the first part, we’ve made an introduction to Angular, what CLI is and how to install your first Angular app. In the second post, you’re going to learn about Angular Components and String Interpolation. Stay tuned :)

因此，在第一部分中，我们介绍了Angular，什么是CLI以及如何安装第一个Angular应用程序。 在第二篇文章中，您将学习Angular Components和String Interpolation 。 敬请关注 ：)

If you want to learn more about Web Development, feel free to follow me on Youtube!

如果您想了解有关Web开发的更多信息，请 随时 在YouTube上关注我 ！

Thank you for reading!

感谢您的阅读！

翻译自: https://www.freecodecamp.org/news/angular-9-for-beginners-how-to-install-your-first-app-with-angular-cli/

安装angular cli