# 搭建本地开发环境和工作区

本指南讲解了如何使用 Angular CLI 工具 搭建你的 Angular 开发环境。包括:前提条件、安装 CLI、创建初始工作区和入门应用,以及在本地运行这个应用来验证你的搭建成果。

无需本地环境,学习 AngularTry Angular without local setup如果你不熟悉 Angular,可能要从立即尝试!开始,它可以在查看和修改一个现成的基础版在线商店的上下文中介绍 Angular 的要点。这个独立的教程利用交互式的 StackBlitz 环境进行在线开发。在你准备好这些之前,无需设置本地环境。

# 前提条件

# Prerequisites

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

  • JavaScript

  • HTML

  • CSS

关于 TypeScript 的知识会很有用,但不是必须的。

要想在你的本地系统中安装 Angular,需要如下步骤:

需求 Requirements 详情 Details
Node.js Angular 需要 Node.js 的活跃 LTS 版或维护期 LTS 版。 关于具体版本需求,参阅 package.json 文件中的 engines。 要了解如何安装 Node.js,参阅 nodejs.org。如果你不确定系统中正在运行的 Node.js 版本是什么,请在终端窗口中运行 node -v。
npm 包管理器npm package manager Angular、Angular CLI 以及 Angular 应用都要依赖 npm 包来实现很多特性和功能。要下载并安装 npm 包,你需要一个 npm 包管理器。本指南使用 npm 客户端命令行界面,该界面默认安装在 Node.js。要检查你是否安装了 npm 客户端,请在终端窗口中运行 npm -v。

# 安装 Angular CLI

你可以使用 Angular CLI 来创建项目,生成应用和库代码,以及执行各种持续开发任务,比如测试、打包和部署。

要安装 Angular CLI,请打开终端/控制台窗口,并运行如下命令:


npm install -g @angular/cli

在 Windows 客户端计算机上,默认禁用 PowerShell 脚本的执行。要允许执行 npm 全局二进制文件所需的 PowerShell 脚本,你必须设置以下内容执行策略

[content_copySet-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned

仔细阅读执行命令后显示的消息并按照说明进行操作。确保你了解设置执行策略的含义。](https://docs.microsoft.com/en-us/powershell/module/microsoft.powershell.core/about/about_execution_policies)

# 创建工作区和初始应用

你要在 Angular 工作区 的上下文中开发应用。

要创建一个新的工作区和初始入门应用:

  • 运行 CLI 命令 ng new并提供 my-app名称作为参数,如下所示:

ng new my-app
  • ng new命令会提示你提供要把哪些特性包含在初始应用中。按 Enter 或 Return 键可以接受默认值。

Angular CLI 会安装必要的 Angular npm 包和其它依赖包。这可能要花几分钟的时间。

CLI 会创建一个新的工作区和一个简单的欢迎应用,随时可以运行它。

# 运行应用

Angular CLI 中包含一个服务器,方便你在本地构建和提供应用。

  • 导航到 workspace 文件夹,比如 my-app

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

  • 运行下列命令:

Run the following command:


cd my-app
ng serve --open

ng serve命令会启动开发服务器、监视文件,并在这些文件发生更改时重建应用。

--open(或者只用 -o缩写)选项会自动打开你的浏览器,并访问 http://localhost:4200/

如果你的安装和环境搭建成功了,就会看到如下页面。

Welcome to my-app!

# 下一步

  • 关于 Angular 单页应用程序架构和设计原理的基本概念和术语的详尽介绍,参阅 Angular 的基本概念 部分。

  • 过一遍英雄之旅教程,这是一个完整的动手练习题,它将教你使用 Angular CLI 进行应用开发的过程,并逐步介绍重要的子系统。

  • 要了解关于使用 Angular CLI 的更多信息,请参阅 CLI 概述 。除了创建初始工作区和应用搭建之外,你还可以使用 CLI 来生成 Angular 代码,比如组件和服务。CLI 支持完整的开发周期,包括构建、测试、打包和部署。

  • 要了解更多关于 ng new生成的 Angular 文件的信息,请参阅工作区和项目文件结构。

Last Updated: 5/10/2023, 8:25:49 AM