欢迎来到 Angular

Angular 是一个用于构建客户端应用的 JavaScript 框架，它使用 HTML、CSS 以及像 JavaScript 这样的编程语言。Angular 是一组组件的集合，这些组件包含执行应用程序所需的代码，并配有对应的模板，用于在浏览器中显示数据。Angular 提供了诸如将代码中的数据绑定到模板显示、丰富的 HTML 表达能力，以及内置的包来与各种服务进行交互，包括后端集成服务等功能。

Angular 包含 组件、服务、指令、模块、管道 等元素，这些使得我们的应用程序更加高效。如今已有大量应用基于 Angular 构建。自 Angular 框架推出以来，前端开发领域发生了显著变化，从 AngularJS 发展到 Angular 9（采用 Ivy 渲染引擎）。2009 年，Misko Hevery 和 Adam Abrons 在 Google 作为副项目开发了 Angular，旨在利用 HTML 标签构建应用。名称“Angular”正是源于 HTML 中使用的角括号（angular brackets）。

Angular 应用的基本结构

• NgModules
• 组件
• 指令
• 服务与依赖注入
• 路由
• 数据绑定

在接下来的课程中，我们将逐一深入探讨这些核心概念。

基础 Angular 应用的架构

上图展示了基础 Angular 应用的架构。

需要关注的重要文件

为了理解 Angular 的运行流程及其生态系统，我们来看一些关键文件。

首先，浏览器中加载的第一个文件是 index.html，它是整个应用的入口点，通过选择器引用根组件：

1<app-root></app-root>

为了指定具体渲染的部分，会在 main.ts 文件中通过以下方式声明：

1platformBrowserDynamic().bootstrapModule(AppModule)

这确保了 App 模块在应用启动时最先加载。

Angular 应用中其他一些重要文件包括：

• package.json用于定义项目的依赖项以及可执行的脚本命令。
• angular.json该文件为 Angular CLI 提供构建和开发工具的默认配置。你新建的应用会在此文件的 projects 部分列出。

angular.json

1"projects": {
2  "app_name": {
3    ...
4  }
5  ...
6}

tsconfig.json
包含 TypeScript 编译器的配置信息。由于 TypeScript 需要被编译为浏览器可识别的 JavaScript，因此需要使用 tsc 编译器，并配置相应的参数。

此外还有许多其他文件，例如用于全局样式的样式文件、用于兼容旧版浏览器的 polyfills 等。

在下一章中，我们将学习单页应用的概念，并了解如何借助 Angular CLI 创建它们。