Angular 基础教程（7.0）

最新推荐文章于 2022-10-12 18:55:39 发布

蔚1

最新推荐文章于 2022-10-12 18:55:39 发布

阅读量7.3k

点赞数 6

CC 4.0 BY-SA版权

文章标签：前端 Angular ViewUI

本文链接：https://blog.csdn.net/valada/article/details/84537383

本教程详细介绍了Angular 7.0的基础知识，包括组件化的核心概念，适合Angular初学者和有经验的开发者。课程涵盖组件、模块、路由、服务、表单、依赖注入等多个关键特性，并通过实际项目实践帮助读者掌握Angular的日常开发。课程强调概念模型的构建，特别关注组件、模块和路由，帮助读者快速上手并深入理解Angular框架的精髓。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

课程亮点

按照初学者的学习路线规划内容
所有代码均采用 Angular 7.0 版本
覆盖日常开发中使用频率最高的特性
To B、To C 型界面，移动端 PWA 全面覆盖
附赠 3 个附录，对比 5.0、6.0、7.0 版本

读者反馈

《Angular 初学者快速上手教程》课程发布已有一年，期间收到了很多读者的留言，这里摘录几条，仅供参考。为了不打搅这些朋友，部分采用了匿名。

enter image description here

课程背景

本课程是 Angular 基础教程，目标是带领读者快速上手实战。课程以 3 个核心概念作为主线（组件、路由和模块）以及在业务开发过程中必须用到的特性（工具、指令、表单、RxJS、i18n、测试）来展开讲解。

除了这 3 个核心概念具有很强的关联性外，其他内容都是完全独立的，读者在用到的时候可以随时翻阅。注射器部分的内容稍微复杂一些，日常开发过程中用到的不多。

认真学完这门课程之后，将会深入理解新版本 Angular 的概念模型，具备使用 Angular 上手进行开发的基本能力。

作者介绍

大漠穷秋，10 年开发经验，其中 5 年后端、5 年前端。熟悉 Java 相关的技术体系：Spring MVC、MyBatis、Ehcache、ELK、MySQL 等。在前端技术方面尤其有深入的研究，先后使用并研究过 Flex、jQuery、Ext JS、Backbone、Bootstrap、Angular 等常见的前端技术体系。

2016 ~ 2017 年期间，担任 Angular Developer PM，专门帮助 Google Angular 团队在中国推广 Angular 框架。

出版了《Ext 江湖》一本图书，翻译出版了《ActionScript 3.0 游戏设计基础（第二版）》《用 AngularJS 开发下一代 Web 应用》《迈向 Angular 2》三本图书。

更详细的资料和演讲照片，请点击这里查看
搭建并维护的专业 Angular 技术论坛，请点击这里查看

课程大纲

enter image description here

* 实际更新文章题目可能与框架略有出入

课程内容

开篇词：为什么会写 Angular 这门课

有的读者可能会问：Angular 相关的文章到处都有，我为什么要来学习这门课？

这是一个非常好的问题，说明读者对阅读内容有质量要求。

如果是我，我也会有这样的疑惑。

整体上说，这门课的内容有以下特色。

最近 5 年我一直在“玩”前端方面的东西，比如 jQuery、SVG、Ext JS、Adobe Flex、Angular；尤其在 2016 年，这一整年的时间我代表 Angular 项目组在中国进行技术推广。因此，我会按照初学者一般的学习过程，用我自己的语言一步一步进行讲解。

在这 5 年里，我在超过 50 家企业、开源组织、大学里面进行了大量演讲，在网络上发布了大量的视频和文章。在到处奔波的过程中，认识了很多人，有经验丰富的后端开发者、也有新入行的初学者，他们跟我说过很多自己的困惑，我会把常见的一些疑问融入在内容里面。

我也会扫平日常开发中常见的坑，这些坑大部分都是开发者们反馈给我的，或者是到我这里吐槽过的。举几个典型的例子：

很多开发者到我这里来抱怨说，在 Windows 平台上安装 @angular/cli 会报很多 error，那是因为 @angular/cli 在 Windows 平台上面依赖 Python 和 Visual Studio 环境，而很多开发者的机器上并没有安装这些东西。为什么要依赖这些环境？因为某些 npm 包需要在你本地进行源码编译。
node-sass 模块被墙的问题，强烈推荐使用 cnpm 进行安装（点击这里跳转到安装地址），可以非常有效地避免撞墙。
一些开发者来抱怨说 @angular/cli 在打包的时候加上 --prod 参数会报错，无法编译。这是一个很常见的问题，因为 @angular/cli 最新的版本经常会有 bug，只要在项目的 package.json 里面降低一个小版本号就 OK 了。另外，加 --prod 参数之后，编译器会进行更加严格的检查，如果存在无用的组件或者配置错误，则编译过不去。
@angular/cli 默认生成的 karma.conf.js 配置文件里面采用了一个有 bug 的 HTML 报告生成器，导致 ng test 运行报错，我们需要把这个 reporter 改成 mocha（摩卡），具体的配置和实例请参考“第10课：自动化测试”中的讲解。
还有的开发者说，本地开发的时候运行得很好，上线之后所有请求 404。这也是一个常见的坑，因为你需要给 Web 容器配置一下处理 HTTP 请求的规则，把前端路由扔回去交给 Angular 处理，可点击这里查看具体的情况。

诸如此类的坑还有不少，我都是一个一个踩过来的。当然，我相信读者也能踩过来，但是从节约时间的角度来看，跟着我的思路走一遍岂不是更快？

这门课全部聚焦在使用层面上，覆盖日常开发中使用频率最高的特性，除非迫不得已，尽量不扯原理。长期以来，我发现有很多读者的学习方式存在误区，比如，有一些人上来就去研究“变更检测”的原理，还有 RxJS 的原理，这种方式除了打击你自己的自信心之外得不到任何好处。因为你迟早会发现，在计算机领域，任何东西研究到最底层都和“算法”、“数据结构”、“设计模式”有关。

据我所知，很多读者平时并没有去研究这些内容的基础知识，因此，我推荐采用更加务实一点的方案，首先学会如何使用，等用熟练了，有时间、有闲情的时候再去研究那些底层的原理。设计发动机很难，但是学会开车并不难，对吧？所以我写这门课的目标很简单，就是带你学会开车，而不是教你设计发动机。

这门课非常看重“概念模型”（Mental Model）的构建。我发现，很多开发者已经做过非常多的项目了，但是当你跟他聊的时候，很快就会发现他并没有掌握这门框架的精髓。打几个比方：

当有人提到 Spring 的时候，你的大脑里面第一个想到的一定是 DI、IoC、AOP 等这些核心概念；
当有人提到 Hibernate、MyBatis、JPA 的时候，你的大脑里面立即会浮现出 ORM 等概念；
当有人提到 React 的时候，你想到的应该是 VDOM、JSX；
当有人提到 jQuery 的时候，你首先想到的应该是 $，对吧？

因此，可以看到，任何一个成功的框架都有自己独创的“概念模型”，或者叫“核心价值”也可以，这是框架本身存在的价值，这些核心概念是掌握这个框架应该紧扣的主线，而不是上来就陷入到茫茫的技术细节里面去。

课程里面涉及到的例子总数量大约有 300 个，有少量例子来自官方文档（大约 5 个），其他的例子都是我自己一点一点手动敲出来的。我把这些例子分成了 10 个开源项目，它们互相独立，方便读者进行参考和练习。这些教学用的开源项目本身是免费的，已放在了本课的末尾。

Angular 的概念模型

既然如此，问题就来了，新版本的 Angular 的核心概念是什么呢？

非常简单，一切都是围绕着“组件”（Component）的概念展开的。

86a9de10-e25f-11e8-aea1-e3c6bbbc3251

Component（组件）是整个框架的核心，也是终极目标。“组件化”的意义有 2 个：一是分治，因为有了组件之后，我们可以把各种逻辑封装在组件内部，避免混在一起；二是复用，封装成组件之后不仅可以在项目内部复用，而且还可以沉淀下来跨项目复用。
NgModule（模块）是组织业务代码的利器，按照自己的业务场景，把组件、服务、路由打包到模块里面，形成一个个的积木块，然后再用这些积木块来搭建出高楼大厦。
Router（路由）的角色也非常重要，它有 3 个重要的作用：一是封装浏览器的 History 操作；二是负责异步模块的加载；三是管理组件的生命周期。

因此，在这门课程里面，Component、NgModule、Router 加起来会占据绝大部分的篇幅，而一些琐碎的小特性会被忽略掉。我相信，读者只要紧扣“组件化”这个主线，就能站在一个很高的角度去统摄全局，从而掌握到这个框架的精髓。