安裝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, CSS
  HTML，CSS
• JavaScript / ES6
  JavaScript / 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.x
  Angular JS→版本1.x
• Angular → version 2 and above
  Angular→版本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