专业的编程技术博客社区

网站首页 > 博客文章 正文

【译】Angular 教程简介 - 第一个 Angular 应用程序

baijin 2025-04-06 13:27:30 博客文章 12 ℃ 0 评论

大家好,我是寻找安多芬。
由于工作中会用到 Angular,目前我正在学习 Angular,但是我发现 Angular 中文官方文档中也有未翻译完成的英文文档,由于 Angular 的第三方翻译者受到严格的限制,所以我姑且先做个人学习翻译之用,也做为我学习的一个记录。

免责声明

本文属于是安多芬的直男翻译了,仅供粉丝参考,英文原味版请临幸 Angular 教程简介 - 第一个 Angular 应用程序

Angular 教程简介 - 第一个 Angular 应用程序

本教程包含介绍开始使用 Angular 编码所需了解的 Angular 概念的课程。

如果您刚刚开始使用 Angular,按顺序完成课程可提供最佳的学习体验,因为每节课都建立在前几节课的基础上。在你熟悉了 Angular 之后,你可以回到任何课程进行复习。

如果您更有经验,可以单独完成本教程中的课程。您可以根据需要执行任意多或少操作,并且可以按任何顺序执行。

准备工作

为了获得本教程的最佳体验,请查看这些要求,以确保你具备成功所需的条件。

本教程中的课程假定您已完成以下操作:

  1. 通过直接编辑 HTML 创建了 HTML 网页。本教程引用了 HTML 元素和文档对象模型 (DOM)。如果不熟悉这些术语,请在开始本教程之前查看 HTML 编程。
  2. 用 JavaScript 编程的网站内容。本教程有许多基于 JavaScript 的 TypeScript 编程示例。介绍了特定于 TypeScript 的功能,但要理解本教程中的课程,必须熟悉 JavaScript 编程。
  3. 阅读级联样式表 (CSS) 内容并了解如何使用选择器。本教程不需要任何 CSS 编码,但如果不熟悉这些术语,请在开始本教程之前查看 CSS 和选择器。
  4. 使用命令行指令在计算机上执行任务。Angular 使用 Angular CLI 来执行许多任务。本教程提供了要使用的命令,并假定您知道如何打开使用它们的命令行工具或终端界面。如果您不确定如何使用命令行工具或终端界面,请在开始本教程之前查看这些工具或终端界面。

你的装备

这些课程可以通过使用 Angular 工具的本地安装或在 Web 浏览器中使用 StackBlitz 来完成。本地 Angular 开发可以在基于 Windows、MacOS 或 Linux 的系统上完成。

在自己的计算机上工作的好处是能够将您的工作保存在本地以备将来参考。在 StackBlitz 中工作使您无需在自己的计算机上加载任何软件即可完成课程。

第一个 Angular 应用的概念预览

本教程中的课程创建了一个简单的 Angular 应用程序,该应用程序列出了待出租的房屋并显示各个房屋的详细信息。此应用程序使用许多 Angular 应用程序通用的功能。

开发环境

如果计划在本地计算机上完成本教程,则必须安装所需的软件。如果您已经安装了某些必需的软件,则必须验证它是否是正确的版本。

在要用于本教程的计算机上的命令行工具中执行这些步骤。

重要提示:如果您打算使用 StackBlitz 进行课程,您可以继续学习第一课。您无需安装任何软件。

第1步 - 确定Angular需要的node.js版本

重要说明:仅当您安装了某个版本的节点时,才需要执行此步骤,否则,请继续执行下面的步骤 2。

Angular 需要 Node 的活动 LTS 或维护 LTS 版本。让我们确认您的 node.js 版本。有关特定版本要求的信息,请参阅 package.json 文件中的 engines 属性。

在“终端”窗口中:

  1. 在“终端”窗口中:
  2. 确认显示的版本号符合要求。

第 2 步 - 为 Angular 安装正确版本的 node.js

如果您没有安装 node.js 版本,请按照 nodejs.org 上的安装说明进行操作

第 3 步 - 安装最新版本的 Angular

安装 node.js 和 npm 后,下一步是安装 Angular CLI,它为有效的 Angular 开发提供了工具。

在“终端”窗口中:

  1. 运行以下命令: npm install -g @angular/cli
  2. 安装完成后,终端窗口将显示本地计算机上安装的 Angular CLI 版本的详细信息。

步骤 4 - 安装集成开发环境 (IDE)

您可以自由使用您喜欢的任何工具来使用 Angular 构建应用程序。我们建议以下几点:

  1. Visual Studio Code
  2. 作为一个可选的,但推荐的步骤,你可以通过安装 Angular 语言服务来进一步改善你的开发人员体验

课程回顾

在本课中,你了解了在本教程中生成的应用,并准备了本地计算机来开发 Angular 应用。

下一步

First Angular app lesson 1 - Hello world

Tags:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表