你可能错过的 Angular 简介

什么是 Angular

单页应用程序架构

是什么让 Angular 成为一个框架？

学习 Angular

开发 Angular 应用程序

Angular 的下一步是什么？

就这样吧，伙计们！

什么是 Angular

Angular 是一个基于 TypeScript 开发单页应用程序的框架。它由 Google 的 Angular 团队开发，并于 2016 年发布了稳定版本 2。它是 Google 开发的另一个框架 AngularJS 的完全重写版本。

Angular 使用了服务器端框架的常见功能，例如模块、依赖注入和类型化语言，并推荐使用按功能分类的文件夹结构，为您做出多项决策，包括设计和架构决策。这使得 Angular 开发入门略有难度，您可能会发现自己在做最简单的事情时也会寻求Angular 的方式。但它们也允许轻松扩展应用程序，并在大型开发团队中实现一致性开发。

单页应用程序架构

每个应用程序都有自己的架构，但所有单页应用程序最终都需要某些部分。

• 用户界面层
• HTTP 库
• 逻辑
• 路由器
• 州经理

无论如何，这些都是构建完整 SPA 所需的最常见部分。^参考

另一种查看 SPA 架构的方式是通过层：^参考

• 看法
• 服务
• 店铺
• 领域

您可以看到两种方法之间的关系。

是什么让 Angular 成为一个框架？

如果您看一下架构，您会注意到 Angular 实际上为架构的每个部分都有一个模块或库。

这就是 Angular 成为一个框架的原因，它由多个模块组成，满足开发单页应用程序的需求。

与 React 或 Vue 相比，它们仅代表架构的视图部分或用户界面，您需要自己为应用程序的其他层选择最佳库。

• 用户界面层的组件
• HttpClient 作为 HTTP 库
• 逻辑组件和服务
• 路由器用于路由
• 担任州经理

此外，还有其他库可以帮助您开发应用程序，例如：

• JavaScript 动画
• 模板驱动表单的表单
• ReactiveForms 用于模型驱动的表单
• i18n 用于国际化，本地化
• 模板数据转换管道
• 针对不同目标平台的平台模块（例如：浏览器、Webworker）
• 身份验证和授权管理的防护
• 用于快速设置、测试和构建的 CLI 工具
• 还有更多...

学习 Angular

Angular 的s shaped学习曲线比较陡峭，这意味着你一开始可能会进展缓慢，因为除了框架本身（这个框架本身相当庞大且功能丰富）之外，你还需要学习如何使用一些工具。你需要一些时间来积累使用经验，但之后，你可能就不需要再学习其他任何东西了。

首先要说一下 Angular，有几种技术可能会让你一开始感到害怕：

• 打字稿
• ES2015（以及 ES2016、ES2017、ES2018）
• 装饰器
• 可观察对象
• rxjs
• 延迟加载
• 主动光传输
• 依赖注入
• 并且列表还在继续...

对这些感到害怕完全正常，我的意思是……Angular 到底是什么？为什么就不能正常一点呢？

还有... Angular 风格指南。

这种设计选择在开发大型应用程序时很有价值，但即使在小型应用程序中也会使您受益。

如果你想全面了解 Angular 世界，《英雄之旅》教程是不错的选择。它会持续更新，并会一步步讲解最常用的功能。

现在我将对 Angular 所使用的最重要的、也是最有争议的工具进行一个简单的介绍。

打字稿

这是反对 Angular 最常见的论点，实际上，你完全可以不使用 Typescript 来开发 Angular 应用。但是，以下是一些理由，说明为什么 Typescript 可能会让你做得更好：

• 自动依赖注入
• ES2015+ 的优势
• 装饰器
• 类似 IDE 的体验

ES2015+

我们中的一些人仍在使用纯 ES5 开发应用程序。好吧，差不多是 ES5，因为我们总是在它之上使用一些东西，比如 lodash、jQuery 等等。但是，像 Webpack 或 Rollup 这样的构建工具现在已经相当普遍，你应该不会觉得使用它们不舒服。使用 ES2015+ 的功能，你甚至可能不需要jQuery或lodash。

装饰器

装饰器模式是一种设计模式，它允许将行为静态或动态地添加到单个对象，而不会影响同一类中其他对象的行为。ref在 Javascript 中，装饰器^提案处于第一阶段，当时 Angular 团队宣布他们将在 ATScript（一种扩展 Typescript 的短暂语言）中使用装饰器。微软同意在 Typescript 中引入许多 ATScript 特性，以供 Angular 团队在 Angular 2 的开发中使用。它现在处于第二阶段，但其规范已发生变化。Typescript 仍然使用之前的规范，因为它被 Angular 所使用。

关于装饰器，最重要的一点是，它们最终只是函数，用于在类、属性或方法中添加行为。它们非常易于使用、学习和开发。如果你有 React 背景，你可以将它们视为某种高阶函数。

可观察对象（响应式编程和 rxjs）

这实际上应该是最难学的东西，但也是学了之后你生活中必不可少的东西之一。响应式编程是一种以异步方式处理数据的编程范式，允许获取计算操作的最终值。JavaScript 中响应式编程的实现将是 Observables，目前处于第一阶段，很快就会进入第二阶段。这意味着，可能几年后，所有主流的浏览器都会原生支持它。

rxjs 是一个实现其自己的 Observable 版本的库，它被 Angular 大量使用，特别是用于处理数据获取，因为 HttpClient 实例将返回一个可观察对象，并发出事件，因为 EventEmitter 从 Observable 扩展。

为了简化您的学习过程，每个 rxjs Observable 实例都包含一个方法，用于在 Observable 完成后将toPromise其值解析为 Promise 。处理用户事件时，这比较棘手，因为大多数事件永远不会完成。但您可以使用这种方法来处理数据获取，因为它们会在请求完成后完成。不过，最好先了解 rxjs Observable 及其操作符的使用方法。

延迟加载、AoT、依赖注入...以及 Angular 样式指南。

在使用 Angular 进行开发时，依赖注入是你必须了解的知识，但这在其他框架中也相当常见，尤其是在服务器端框架中。不过，如果你不知道依赖注入是什么，那么很快你就会明白，它是一种请求并获取某个类的实例的能力。这是一种非常简单的理解方式，但最终，它实际上就是这样的。

其他所有东西，你都可以用万事达卡。好吧，你可能没有。不过你不需要知道所有这些。当然，延迟加载和 AoT 会帮助你减少应用程序的包大小，但首先，还是先构建好应用程序吧。之后再考虑这些事情很容易，而且它们在开发初期并不是必需的。

关于 Angular 样式指南，嗯，这正是我喜欢 Angular 的地方，他们有自己的一套做事方法。有时间的话可以看看。在处理大型应用程序时，它肯定会对你有所帮助。

ngrx

我要说的ngrx是，在我看来，这是唯一一个真正与 Angular 深度集成的状态库。理解了 Flux 模式之后，它真的很容易上手。我甚至在 EggHead 上学习了 React+Redux 课程。所以，没错，Redux 就是我的使用方法。

开发 Angular 应用程序

我会在这里作弊，并使用 Angular-cli。

$ npm install -g @angular/cli
$ ng new demo-app

这将生成开发 Angular 应用程序所需的所有文件，甚至会设置 Karma 作为单元测试框架，并使用 Protractor 进行端到端测试。为了启动新的应用程序，我将再次使用 Angular CLI。

$ npx ng serve
// or
$ npm start

Angular-CLI 在包中创建了几个脚本，用于服务、构建和测试。

这将使用底层的 Webpack Dev Server 为 Angular 应用程序提供服务。Angular-CLI 是一款功能强大的工具，它允许您创建新项目、组件、服务、管道、模型以及开发 Angular 应用程序所需的几乎所有内容。

你必须注意到，使用 Angular-CLI 有一个缺点，那就是你无法直接配置构建配置。这是一个设计决策，它确实有其动机，但仍然如此。如果你想完全控制构建过程，你不应该这么做，因为 CLI 几乎可以为你完成所有事情，但如果你想要，你只需要配置ng eject项目即可。

使用 Angular-CLI 不会阻止您将 Angular 应用程序与其他框架（如 Electron、NativeScript 或 Ionic）集成。

Angular 的下一步是什么？

到目前为止，我们已经了解了 Angular 的几个关键特性，但未来还有很多功能即将推出。以下一些特性目前已部分可用或处于 Beta 版本，其中一些将在 Angular 的下一个版本中推出，还有一些将在之后陆续推出。

• Angular Elements - 使用 Angular 组件作为自定义 Web 组件
• Ivy Renderer - 减少 Angular 应用程序的捆绑包大小，并提高渲染性能。
• 组件开发工具包 (CDK) - 一组高性能 Angular 组件，可包含在您选择的 CSS 框架中。
• Bazel——更好的构建工具。
• Schematics - Angular CLI 项目的文件代码转换。

当然，路线图还包括一些优化和错误修复，但这些都是您将在下一个项目中使用的新功能。

就这样吧，伙计们！

感谢阅读。希望你喜欢。分享给你的朋友、同事、私信，并在评论区留言告诉我你的想法。