一款待办应用基本上相当于前端开发的“Helloworld”。虽然涵盖了创建应用程序的CRUD方面，但它通常只是触及了框架或库可以做的事情的皮毛。Angular似乎总是在变化和更新——但实际上，有些事情是一样的。以下概述了您需要了解的有关Angular的核心概念，以便您可以正确使用JavaScript框架。说到Angular，要学的东西很多，很多人因为不知道去哪里搜索，不知道搜索什么关键词，就卡在了新手的圈子里。我们将在下面介绍的指南（以及Angular本身的快速摘要）我真的希望在我第一次开始使用Angular2+时就拥有它。1.模块化的Angular架构理论上，你可以将所有Angular代码放在一个页面上，然后将其放入一个大函数中，但不推荐这样做，这不是一种高效的代码结构方式，而且违背了Angular存在的目的.Angular将模块的概念视为框架架构的重要组成部分，它指的是只有一个存在理由的代码集合。你的Angular应用基本上由模块组成——一些是独立的，一些是共享的。在您的应用程序中有多种构建模块的方法，深入了解不同的体系结构还可以帮助确定如何随着应用程序的增长扩展它，它还可以帮助隔离代码并防止代码耦合。搜索关键词：Angular架构模式ScalableAngular应用架构二、单向数据流和不可变性早在Angular1时代，双向绑定就俘获了众多前端开发者的心。这实际上是Angular最初的卖点之一。然而，随着时间的推移，当应用程序开始变得更加复杂时，它开始出现性能问题。事实证明，并不是所有地方都需要双向绑定。双向绑定在Angular2+中仍然是可能的，但只有当开发人员明确要求时——这迫使代码背后的人去思考数据方向和数据流向，同时它也允许应用程序以Streamlined方式确定数据更灵活地处理数据。搜索关键字：Angular数据流最佳实践Angular中的单向流单向绑定的优势3.属性类型和结构指令指令是通过自定义元素对HTML的扩展。属性指令允许您更改元素的属性，结构指令通过在DOM中添加或删除元素来更改布局。例如，ngSwitch和ngIf是结构指令，因为它们评估参数并确定DOM的某些部分是否应该存在。属性指令是附加到元素、组件或其他指令的自定义行为。学习如何使用这两个指令可以扩展应用程序的功能并减少项目中重复代码的数量。属性指令还可以帮助集中应用程序不同部分中使用的某些行为。搜索关键词：Angular属性指令Angular结构指令Angular结构指令模式4.组件生命周期钩子每个软件都有自己的生命周期，它决定了如何创建、渲染和删除某些内容。Angular的组件生命周期是这样的：创建→渲染→渲染子组件→检查数据绑定属性何时发生变化→销毁→从DOM中移除我们可以捕捉这个循环中的关键时刻，将他锁定在特定的时刻或事件中。这使我们能够根据组件存在的不同阶段创建适当的响应并配置行为。例如，您可能需要在渲染页面之前加载一些数据，您可以使用ngOnInit()来完成，或者您可能需要断开与数据库的连接，您可以使用ngOnDestroy()来完成。搜索关键词：Angularlifecyclehookcomponentlifecycle5.Http和observable对象服务这不是Angular特有的功能，而是来自ES7。Angular恰好将它作为框架支持功能的一部分来实现，并且完全理解这一点，并且它可以很好地转换为React、Vue以及任何与JavaScript相关的库或框架。ObservableService是一种允许您高效处理数据的模式——允许您在基于事件的系统中解析、修改和维护数据。你不能完全逃避Http和Observables，因为一切都是数据。搜索关键词：JavaScriptObservablePatternAngularHTTPandObservablesES7ObservableFeatures6.Smart/DumbComponentArchitecture在编写Angular应用程序时，我们倾向于将所有内容都放在组件中。但是，这不是最好的方法。Angular中Smart/Dumb组件的概念需要更多讨论，尤其是在初学者圈子中。一个组件是否是Smart/Dumb决定了它在应用程序的整体规划中扮演的角色。哑组件通常是无状态的，它们的行为很容易预测和理解。所以让你的组件尽可能的笨。智能组件更难掌握，因为它涉及输入和输出。要正确利用Angular的强大功能，请研究智能/哑组件架构，它将为您提供模式和思考如何处理代码及其相互关系的方式。搜索关键字：智能/哑Angular组件无状态哑组件演示组件Angular7中的智能组件。应用程序结构和最佳实践当谈到结构和最佳实践时，CLI只能带你到此为止。构建Angular应用程序（或一般的任何应用程序）就像盖房子。多年来，社区一直在优化设置过程，从而产生最有效的应用程序。角也不例外。那些试图学习它的人对Angular的大部分抱怨往往是由于缺乏结构知识；语法易于访问且清晰。但是，了解应用程序的结构需要了解上下文、需求以及它们如何在概念和实践层面上结合在一起。了解Angular不同的潜在应用程序结构及其最佳实践将为您提供有关如何构建应用程序的全新视角。搜索关键词：MonolithicrepositoryAngularappsAngularlibrary,AngularpackageAngularAngularmicroappMonolithicrepository8.模板绑定语法绑定是JavaScript框架的结晶，它是最初存在的原因之一。模板绑定弥合了静态HTML和JavaScript之间的鸿沟，而Angular的模板绑定语法充当了这两种技术之间的促进者。一旦您了解了如何以及何时使用它们，将曾经的静态页面变成交互式页面就会变得容易得多，也不会那么令人沮丧。探索不同的绑定场景，例如属性绑定、事件、插值和双向绑定。搜索关键词：Angular属性绑定Angular事件绑定Angular双向绑定、Angular插值Angular传递常量9、特性模块和路由在Angular中，特性模块的能力被低估了。它实际上是组织和响应业务需求的绝佳方式。从长远来看，它限制了责任并有助于防止代码污染。有五种类型的功能模块（域功能模块、带路由的功能模块、路由模块、服务功能模块和组件感知功能模块），每种模块处理特定类型的功能。学习将特性模块与路由一起使用可以帮助创建离散的特性集，并将良好且清晰的关注点分离应用于您的应用程序。搜索关键字：AngularFeatureModulesAngularFeatureModuleProviders中的SharedFeatureStructureLazyLoadingRoutingandFeatureModules10.FormsandValidation(ReactiveFormsandValidators)表单是任何前端开发中不可避免的一部分。伴随表单而来的是验证。在Angular中，有许多方法可以构建智能的、数据驱动的表单。最好的形式迭代是反应形式。但是，还有其他选项，即模板驱动的表单和自定义验证器。了解验证器如何与CSS一起工作将有助于加快您的工作流程并将您的应用程序变成一个验证错误就绪的空间。搜索关键词：AngularFormalValidationTemplateDrivenValidationReactiveFormValidationAngularBuilt-inValidators中的同步和异步ValidatorsAngularCustomValidatorsCross-FieldCross-Validation11.ContentProjectionAngular有一个东西叫内容投影，可以有效的传递父组件的数据到子组件。虽然这听起来可能很复杂，但它实际上是将视图放入视图以生成主视图的行为。我们通常从表面上理解内容投影——当我们在父视图中嵌套子视图时。然而，为了扩展我们的理解，我们还需要了解数据是如何在不同视图之间传递的。这是理解内容投影派上用场的地方。了解内容投影可以帮助您确定应用程序的数据流以及可变性发生的位置。搜索关键词：Angular内容投影Angular父子视图关系Angular视图数据关系12.onPush变化检测Angular默认使用默认的变化检测策略。这意味着将始终检查组件。虽然使用默认值没有错，但它可能是检测更改的低效方法。对于小型应用程序，速度和性能还不错。但是，一旦应用程序达到一定大小，运行起来就会变得非常麻烦，尤其是在较旧的浏览器中。onPush更改检测策略将显着加快您的应用程序的速度，因为它依赖于特定的触发器而不是持续检查以查看是否发生了任何事情。搜索关键词：AngularonPush变化检测13.路径保护、预加载、懒加载如果你有某种类型的登录，你会需要路径保护。您可以保护某些视图免受未经授权的视图，这是许多应用程序中的基本要求。PathGuard充当路由器和请求路由之间的接口。某条路由是否允许访问由决策者决定。路径保护领域有很多值得探索的地方——即基于令牌过期、用户身份验证和路径安全性的路径决策。预加载和延迟加载还可以通过加快应用程序的加载时间来增强用户体验。值得注意的是，预加载和延迟加载不仅仅是决定是否加载一组特定的图像，它还可以增强绑定的体系结构并加载可能存在于不同范围和域中的应用程序的不同部分。搜索关键字：Angular路径保护Angular身份验证模式Angular预加载和延迟加载模块Angular安全路径模式14.使用Angular管道的自定义管道使数据格式化变得异常简单。虽然许多预配置和开箱即用的管道涵盖日期、货币、百分比和字符大小写等内容，但它并没有涵盖您需要的一切。这是自定义管道派上用场的地方。您可以轻松地创建自己的过滤器并根据自己的喜好转换数据格式。这真的很容易，所以去看看吧！搜索关键字：AngularCustomPipeline15.@viewChild和@ContentChild装饰器viewChild和contentChild是组件相互通信的方式。Angular的全部要点在于你有多个组件，它们像拼图一样编译在一起，但如果这些组件彼此隔离，拼图就没有多大用处。这就是viewChild和contentChild发挥作用的地方。学习使用这两个装饰器可以让您访问相关组件。这使得数据共享的任务更容易实现和传输由相关组件触发的数据和事件。搜索关键词：Angular中Angular装饰器Viewchild和contentchildAngular组件资料分享16.动态组件和ng-template组件是Angular的构建块。然而，并非所有组件都是固定的，其中一些组件需要动态创建而不是预编译。动态组件允许应用程序动态创建某些组件。静态组件假设事情不会改变。它可以根据预期的输入和输出进行预测。但是，动态组件是按需呈现的。在对可能正在监听外部源及其更新的应用程序或页面上发生的操作建立反应时，它们变得非常方便。搜索关键词：Angular动态组件中的DynamicComponents和ng-templating17.@Host@HostingbindingandexportAs@Host,@HostingbindingandexportAs是扩展附加参数的Angular指令装饰器。它们还使您能够创建简洁的模板，这些模板可以导出以在应用程序中使用。如果以上内容听起来令人困惑，那么您应该首先查看Angular指令及其存在的目的。@Host、@Hostingbinding和exportAs是有助于实现指令的属性。搜索关键字：Angular指令模式Angular的@Host、@Hostingbinding和exportAs18。使用RxJs进行状态管理应用程序的状态最终决定了向用户显示的数据。如果您的状态是一团意大利面条，那么您的整个数据结构很可能会因任何更改而变得脆弱。当您开始了解状态在Angular中的工作方式时，您就会了解数据的行为方式和原因。虽然Angular有自己的状态管理系统，但RxJs是集中状态及其相关数据的最佳方式。父子关系链中的数据可能会丢失。RxJs通过创建集中存储来解耦。搜索关键词：AngularRxJsFlux/ReduxPrinciplesAngularStateManagementPrinciples19.DependencyInjectionandZones“DependencyInjection”通常是一个庞大的概念，所以如果你对这个概念不是很熟悉，这才是你真正需要看的上一个内容。有多种方法可以在Angular中高效地创建依赖注入，主要是通过构造函数。这是一种只导入您需要的内容的方法，使您的应用程序更高效，而不是加载所有内容。与“依赖注入”一样，“区域”是Angular独有的概念。这是应用程序从头到尾检测异步任务的一种方式。这很重要，因为这些异步任务可以更改应用程序的内部状态，从而更改视图。“区域”有助于更改检测过程。搜索关键词：AngularzoneDependencyinjectionAngularDI***Angular是个大话题。虽然构建Angular应用程序可以帮助学习过程，但有时您只是不知道自己不知道什么。一开始，你很难理解未知的事物。我希望这篇简短的指南能给你带来一些超越常规Angular教程的灵感，让你对Angular有更全面的了解。
