填寫這份《一分鐘調查》,幫我們(開發組)做得更好!去填寫Home

搭建本地開發環境和工作區

Setting up the local environment and workspace

本指南講解了如何使用 Angular CLI 工具搭建你的 Angular 開發環境。包括:前提條件、安裝 CLI、建立初始工作區和入門應用,以及在本地執行這個應用來驗證你的搭建成果。

This guide explains how to set up your environment for Angular development using the Angular CLI tool. It includes information about prerequisites, installing the CLI, creating an initial workspace and starter app, and running that app locally to verify your setup.

學習 Angular
Try Angular without local setup

如果你不熟悉 Angular,可能要從立即嘗試!開始,它可以在檢視和修改一個現成的基礎版線上商店的上下文中介紹 Angular 的要點。這個獨立的課程利用互動式的 StackBlitz 環境進行線上開發。在你準備好這些之前,無需設定本地環境。

If you are new to Angular, you might want to start with Try it now!, which introduces the essentials of Angular in the context of a ready-made basic online store app that you can examine and modify. This standalone tutorial takes advantage of the interactive StackBlitz environment for online development. You don't need to set up your local environment until you're ready.

前提條件

Prerequisites

要想使用 Angular 框架,你要先熟悉下列技術:

To use the Angular framework, you should be familiar with the following:

關於 TypeScript 的知識會很有用,但不是必須的。

Knowledge of TypeScript is helpful, but not required.

要想在你的本地系統中安裝 Angular,需要如下步驟:

To install Angular on your local system, you need the following:

  • Node.js

    Angular 需要 Node.js 的活躍 LTS 版或維護期 LTS版

    Angular requires an active LTS or maintenance LTS version of Node.js.

    關於具體版本需求,參閱 package.json 檔案中的 engines

    For information about specific version requirements, see the engines key in the package.json file.

    要了解如何安裝 Node.js,參閱 nodejs.org。 如果你不確定系統中正在執行的 Node.js 版本是什麼,請在終端視窗中執行 node -v

    For more information on installing Node.js, see nodejs.org. If you are unsure what version of Node.js runs on your system, run node -v in a terminal window.

  • npm 套件管理器

    npm package manager

    Angular、Angular CLI 以及 Angular 應用都要依賴 npm 套件來實現很多特性和功能。要下載並安裝 npm 套件,你需要一個 npm 套件管理器。本指南使用 npm 客戶端命令列介面,該介面預設安裝在 Node.js。要檢查你是否安裝了 npm 客戶端,請在終端視窗中執行 npm -v

    Angular, the Angular CLI, and Angular applications depend on npm packages for many features and functions. To download and install npm packages, you need an npm package manager. This guide uses the npm client command line interface, which is installed with Node.js by default. To check that you have the npm client installed, run npm -v in a terminal window.

安裝 Angular CLI

Install the Angular CLI

你可以使用 Angular CLI 來建立專案,產生應用和函式庫程式碼,以及執行各種持續開發任務,比如測試、打套件和部署。

You use the Angular CLI to create projects, generate application and library code, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.

要使用 npm 命令安裝 CLI,請開啟終端/控制檯視窗,輸入如下命令:

To install the Angular CLI, open a terminal window and run the following command:

      
      npm install -g @angular/cli
    

建立工作區和初始應用

Create a workspace and initial application

你要在 Angular 工作區的上下文中開發應用。

You develop apps in the context of an Angular workspace.

要建立一個新的工作區和初始入門應用:

To create a new workspace and initial starter app:

  1. 執行 CLI 命令 ng new 並提供 my-app 名稱作為引數,如下所示:

    Run the CLI command ng new and provide the name my-app, as shown here:

          
          ng new my-app
        
  2. ng new 命令會提示你提供要把哪些特性包含在初始應用中。按 Enter 或 Return 鍵可以接受預設值。

    The ng new command prompts you for information about features to include in the initial app. Accept the defaults by pressing the Enter or Return key.

Angular CLI 會安裝必要的 Angular npm 套件和其它相依套件。這可能要花幾分鐘的時間。

The Angular CLI installs the necessary Angular npm packages and other dependencies. This can take a few minutes.

CLI 會建立一個新的工作區和一個簡單的歡迎應用,隨時可以執行它。

The CLI creates a new workspace and a simple Welcome app, ready to run.

執行應用

Run the application

Angular CLI 中包含一個伺服器,方便你在本地建構和提供應用。

The Angular CLI includes a server, so that you can build and serve your app locally.

  1. 導航到 workspace 資料夾,比如 my-app

    Navigate to the workspace folder, such as my-app.

  2. 執行下列命令:

    Run the following command:

      
      cd my-app
ng serve --open
    

ng serve 命令會啟動開發伺服器、監視檔案,並在這些檔案發生更改時重建應用。

The ng serve command launches the server, watches your files, and rebuilds the app as you make changes to those files.

--open(或者只用 -o 縮寫)選項會自動開啟你的瀏覽器,並訪問 http://localhost:4200/

The --open (or just -o) option automatically opens your browser to http://localhost:4200/.

如果你的安裝和環境搭建成功了,就會看到如下頁面:

If your installation and setup was successful, you should see a page similar to the following.

下一步

Next steps

  • 關於 Angular 單頁應用程式架構和設計原理的基本概念和術語的詳盡介紹,參閱 Angular 的基本概念部分。

    For a more thorough introduction to the fundamental concepts and terminology of Angular single-page app architecture and design principles, read the Angular Concepts section.

  • 過一遍英雄之旅課程,這是一個完整的動手練習題,它將教你使用 Angular CLI 進行應用開發的過程,並逐步介紹重要的子系統。

    Work through the Tour of Heroes Tutorial, a complete hands-on exercise that introduces you to the app development process using the Angular CLI and walks through important subsystems.

  • 要了解關於使用 Angular CLI 的更多資訊,請參閱 CLI 概述。除了建立初始工作區和應用搭建之外,你還可以使用 CLI 來產生 Angular 程式碼,比如元件和服務。CLI 支援完整的開發週期,包括建構、測試、打套件和部署。

    To learn more about using the Angular CLI, see the CLI Overview. In addition to creating the initial workspace and app scaffolding, you can use the CLI to generate Angular code such as components and services. The CLI supports the full development cycle, including building, testing, bundling, and deployment.

  • 要了解更多關於 ng new 產生的 Angular 檔案的資訊,請參閱工作區和專案檔案結構

    For more information about the Angular files generated by ng new, see Workspace and Project File Structure.