Angular 介绍以及如何在 Visual Studio Code 中设置环境 - 第 1 部分

引言

嗨，很高兴见到你。在这个 Angular 系列中，我们将探讨关于 Angular 的方方面面。我们将使用本系列中学习到的知识来构建一个电子商务应用程序。那么，让我们开始学习 Angular 吧。

Angular 是一个用于使用 HTML、CSS 和 Javascript/Typescript 构建客户端应用程序的框架。Typescript 会编译成 Javascript。Typescript 在 Angular 社区中更为常见，因为 Angular 本身就是用 Typescript 编写的。如果你以前从未使用过 Typescript，不用担心，我们会在本系列中探讨它。

为什么在我们已经有了 Javascript/Jquery 的情况下还要使用 Angular？

我们当然可以使用普通的 Javascript 或 JQuery，而且已经有很多 Web 应用程序在使用 Javascript 和 JQuery。但是，随着应用程序变得越来越复杂，我们的 Javascript 和 JQuery 代码也越来越难以维护。我们需要一种方法来正确地构建我们的应用程序。虽然我们有 Javascript 模式（模块模式、原型模式），这些模式也有助于我们进行结构化，但这些模式对于 Javascript 初学者来说很难理解。我们都知道 Javascript 和 JQuery 难以测试，因此在过去几年中，许多框架被构建和发展，以使 Web 应用程序开发更容易。Angular 就是此类框架的一个例子。

它为我们的应用程序提供了一个清晰且松散的结构，易于理解和维护。它还带来了许多实用代码，我们可以在各种应用程序中重用，尤其是在处理用户导航和浏览器历史记录时。使用 Angular 开发的应用程序更具可测试性，因此我们可以轻松编写自动化测试（单元测试）来测试应用程序的各个部分。

所以最终的答案是，Angular 并非必不可少，但它会使你的生活轻松许多。

Angular 应用程序的架构

许多现代应用程序至少包含两个部分

• 前端 (UI)

我们使用 HTML、CSS、Javascript、TypeScript、Angular、JQuery 来构建前端。

• 后端（负责存储数据和执行操作）

它们两者相互作用，以获取和保存数据。

我们如何在 Angular 中保存数据？

我们不会将数据保存在客户端，因为用户清除浏览器数据或切换到其他计算机时，数据很容易消失，这就是为什么我们将数据存储在服务器上。因此，我们通常会有一个或多个数据库以及一堆 HTTP 服务或 API，以便使这些数据可供客户端使用。

这些 http 服务/API 是可通过 Http 协议访问的端点。所以我们调用简单的 Http 来获取或保存数据。

现在让我们为 Angular 准备好环境。

步骤 1

• 安装 node.js

实际上，Node 提供了一些我们构建 Angular 项目所需的工具。

下载 LTS (推荐大多数用户使用) Windows 安装程序并安装它。Current (最新功能) 有更多功能，但它尚未稳定。

• 现在打开命令提示符以确保您的 node.js 安装

如我们所见，node 和 npm 都已安装在系统中。NPM 主要用于安装第三方库，就像我们在 .Net 环境中的包管理器控制台中所做的那样。

第二步

现在我们将通过 npm 安装 Angular CLI。Angular CLI 是一个命令行工具，我们用它来创建新的 Angular 项目或生成一些样板代码（脚手架），以及将包部署到服务器。所以让我们安装 Angular CLI。使用 npm 在系统中安装任何东西的命令模式是：

npm install -g PackageName 

-g 表示全局安装，如果你不加 –g，Angular CLI 将只安装在当前文件夹中，并且在其他任何地方都无法访问。

以管理员身份运行命令提示符

C:\Windows\system32> npm install -g @angular/cli

完成此过程后，我们需要确认软件包是否已安装。因此，运行命令

C:\Windows\system32> ng --version

步骤 3

如果您尚未安装 Visual Studio Code，请安装。如果已安装，请打开 Visual Studio Code。

并打开集成终端

众所周知，一个解决方案或一个目录可以包含多个项目。因此，我们不直接创建项目，而是创建一个目录，然后通过终端在该目录中创建 Angular 项目。

PS C:\Users\Ami Jan> mkdir HelloWorld
PS C:\Users\Ami Jan> cd HelloWorld
PS C:\Users\Ami Jan\HelloWorld> ng new MyFirstAngularProject

在创建项目期间，你可能会看到这个错误

在这种情况下，您只需按顺序运行这些命令，实际上我们这里需要 GitHub 电子邮件地址和用户名

PS C:\Users\Ami Jan\HelloWorld> git config --global user.email <a href="mailto:abc@whatever.com">abc@whatever.com</a>

PS C:\Users\Ami Jan\HelloWorld> git config --global user.name Usama

然后，当您再次尝试创建 Angular 项目时，您的项目最终将被创建。

我仍然面临一些警告，我们不应该为这些警告而烦恼。这些实际上是 IDE 在底层使用的文件标志。我们可以毫无问题地构建和运行我们的应用程序。

PS C:\Users\Ami Jan\HelloWorld> code .

它将在 Visual Studio Code 编辑器中打开我们的项目。

现在我们需要确保它是否在服务器上运行。所以回到 Visual Studio Code 终端，首先确保你的目录文件夹中

如我们所见，我们的项目已成功编译，端口为 localhost:4200，并且 Angular 已为我们创建了 js 和 css 文件。

步骤 4

现在在浏览器中打开 localhost 链接。

Angular 项目演示

• 这里我们有一个“e2e”文件夹。它代表端到端测试，我们在这里编写单元测试。单元测试也是一种自动化测试，它模拟真实用户。
• 另一个文件夹是“node_modules”，我们在这里存储项目中使用的所有第三方库。所有这些 node_modules 都不会部署到服务器上。所以不用担心我们项目总大小可能达到 200MB。只有应用程序所需的一小部分代码块会被添加到应用程序代码中，我们只需将其部署到服务器上。

• 我们有第三个文件夹“src”，其中存储了我们应用程序的实际代码。
  • 在此“src”文件夹中，我们有一个“app”文件夹，其中包含模块和组件文件。每个应用程序至少有一个模块和一个组件。
  • 这里我们还有一个“assets”文件夹，用于存储应用程序的静态文件。这些静态文件可以是图片、图标、文本文件等。
  • 这里我们有一个“environment”文件夹，用于存储不同环境的配置设置。第一个文件用于生产环境，第二个文件用于开发环境。

• 这里我们还有 favicon 文件和 index.html 文件，它们会加载到浏览器中。
• 这里我们有“main.ts”文件，它是我们应用程序的入口点。它用 TypeScript 编写。在许多编程语言中，我们都有主方法的概念，应用程序从这里开始执行。在 Angular 应用程序中，我们也有相同的概念。因此，在 Angular 中，我们实际上是在引导应用程序的主模块“AppModule”。Angular 会加载这个模块，当然，所有事情都从这个主方法开始。
• 这里我们有“polyfills.ts”文件，它导入了一些运行 Angular 应用程序所需的脚本。众所周知，JavaScript 在不同浏览器中存在支持问题，因此我们需要编写 polyfills 来使其在所有浏览器上都能响应。Angular 是一个 JS 框架，为了在不同环境中运行应用程序，我们需要底层的 polyfills。
• 这里我们有一个“style.css”用于全局应用程序样式。每个页面和每个组件都可以有自己的样式，我们稍后会探讨。
• 这里我们有“test.ts”，它主要用于设置和测试环境。

在“src”文件夹之外，我们有

• angular.json (与 Angular 配置相关)
• .editorconfig（在团队环境中工作时很重要，所有团队成员都应该在这个文件中拥有相同的设置）
• .gitignore（用于忽略或排除您的 Git 存储库中的某些文件和文件夹。Git 本质上就是管理和版本控制您的源代码）
• package.json（这是一个标准的、基本的文件，包含在每个 Node 项目中。它包含有关依赖项（包和库）及其版本号的信息）

如我们所见，每个库都以 @angular 开头，然后是它自己的名称。如果您不打算在项目中使用任何库，可以从这里删除它。

这里我们还有“devDependencies”，这些是开发此应用程序所需的库。这些库纯粹对开发人员机器很重要，而不是用于运行应用程序和部署到服务器。

• 这里我们有一个“tsconfig.json”，它是一个 TypeScript 配置文件。TypeScript 编译器会查看这些设置，并根据这些设置将我们的 TypeScript 代码编译成 JavaScript。将来，如果您正在处理复杂的应用程序，您可以在此文件中更改您的 TypeScript 配置。
• 最后我们有“tslint.json”，它本质上是一个用于 TypeScript 代码的静态分析工具。它帮助我们解决 TypeScript 代码在可读性、可维护性和功能错误方面的问题。

Webpack

现在让我们对这个应用程序进行一些更改，让我向您展示 Angular 的魔力。

• 打开 app 文件夹中的“app.component.ts”。
• 在 AppComponent 类中更改标题的值
• 打开 VS Code 终端
• 然后点击保存 (Ctrl + S)

Angular CLI 使用 webpack 工具，它实际上是一个自动化工具，它获取我们所有的样式表和 JavaScript 文件并将它们组合成一个包，然后为了优化目的对该包进行最小化。每当我们保存项目中的任何更改时，webpack 都会运行并更新服务器上的数据，而无需刷新应用程序。这是 webpack 的一个特性，称为热模块替换 (HMR)。

现在，如果我们在浏览器中打开并检查页面，我们就会看到页面上的引用。

如果我们从“src”文件夹打开 index.html 页面，文件中没有任何文件引用。

这些引用由 webpack 动态添加到 HTML 文件中。

注意：如果您查看页面源代码，我们会看到 styles.js，这意味着我们所有的样式表都已编译成 JavaScript 包。我们所有的样式都在 JavaScript 内部工作。

Angular 版本历史的区别

AngularJS 于 2010 年首次推出，作为用于构建客户端应用程序的 JS 框架。它很快就获得了普及。Angular 团队开始向核心添加新功能。但该框架并非根据当今应用程序的需求而设计，并且过于复杂。因此，Angular 团队决定使用 TypeScript 重写原始框架。

结果，Angular 2 于 2016 年年中问世。这个新版本与 Angular 1 完全不同。你会觉得它是一个完全不同的东西。这让许多开发人员感到不高兴，因为他们用 Angular 1 构建了大量应用程序，每个应用程序都有数千行代码，不得不重写。但这个新框架是一个更简洁的框架，更容易理解和使用。

在对 Angular 2 进行了一些小幅升级之后，最终发生了一些奇怪的事情。

2.0 -> 2.1 -> 2.2 -> 2.3 -> 4（突然 Angular 4 问世）

这让开发人员好奇 Angular 3 发生了什么。但与 Angular 2 不同，Angular 4 并不是一个带有许多重大更改的新框架。事实上，它甚至不是一个主要升级。

让我们看看发生了什么

Angular 由一些库组成，这些库通过 npm 以单独的节点包形式分发，例如：

          @angular/code                         2.3.0

          @angular/compiler                   2.3.0

          @angular/http                           2.3.0

          @angular/router                        3.3.0

以及其他一些库。除了路由器库之外，所有这些库的版本都相同。因此，为了统一这些版本并避免将来混淆，Angular 团队决定将 Angular 版本定为 4。

因此 Angular 4 并不是 Angular 2 的重大升级，你甚至可以简单地将其视为 Angular 2.4。

在社区对 Angular 版本产生所有这些困惑之后，团队决定放弃版本后缀，直接将该框架称为 Angular。

所以现在我们有两种 Angular

AngularJS (1.x) Angular 的第一代，用 JS 编写，迟早会消亡

Angular (2+)

结论

我们在这里学到了很多关于 Angular 的知识。我们使用 Visual Studio Code 终端和 Angular CLI 创建了 Angular 6 应用程序。我们还显示了自定义消息，并探讨了 webpack 和 Angular 的不同版本。在系列的下一部分再见。