angular 最佳实践_Angular最佳实践–简化Angular应用程序的开发

淩亂°似流年 2022-12-07 13:18 274阅读 0赞

![03de7a6de77cd70606c1230d55d1fb1e.png][]

angular 最佳实践

Making an Angular application is not enough. Keeping the code simple and well-maintained is equally important. For doing so, you need to stick to some of the Angular best practices. Not does it only helps in making the application cleaner but also boosts the performance of the same.

制作Angular应用程序还不够。 使代码保持简单和良好维护同样重要。 为此，您需要遵循一些Angular最佳实践。 它不仅有助于使应用程序更清洁，而且可以提高应用程序的性能。

Angular boasts charting on the list of [top 10 web development frameworks in 2018][] as the leading front-end framework. Though Angular is one of the leading web application frameworks, it can also be used for building native mobile and desktop applications.

Angular自豪地跻身[2018年十大Web开发框架之列，][top 10 web development frameworks in 2018]成为领先的前端框架。 尽管Angular是领先的Web应用程序框架之一，但它也可以用于构建本机移动和桌面应用程序。

Considering the popularity and importance that Angular has accumulated, now is the best time to [learn Angular][] if you haven’t done it already. Anyways, if you are already developing apps using Angular then must know how to do it better to remain competitive in the rapidly-changing realm of programming.

考虑到Angular积累的知名度和重要性，如果您还没有[学习Angular][learn Angular] ，现在是最好的时机。 无论如何，如果您已经在使用Angular开发应用程序，那么必须知道如何做得更好，才能在瞬息万变的编程领域保持竞争力。

As such, we are here to share with you some of the best Angular practices suggested by experts. In order to make the most out of this article, you need to have at least a basic understanding of Angular. Considering you have that, let’s advance to the list of 12 best practices for Angular development.

因此，我们在这里与您分享一些专家建议的最佳Angular做法。 为了充分利用本文，您需要至少对Angular有一个基本的了解。 考虑到您拥有的内容，让我们进入Angular开发的12个最佳实践列表。

![Angular Best Practices][]

## 最佳角度实践 **(**Angular Best Practices**)** ##

### 1.添加缓存机制 **(**1. Add Caching Mechanisms**)** ###

Simply, having a caching mechanism in place avoids unwanted API calls. Responses from some of the API calls don’t change at all. In such scenarios, adding a caching mechanism allows for storing the specific value from the API.

简单来说，采用缓存机制可以避免不必要的API调用。 来自某些API调用的响应完全不变。 在这种情况下，添加缓存机制可以存储来自API的特定值。

Adding caching mechanisms ensures that the same information is not downloaded time and over again. Moreover, making the API calls only when required and avoiding duplication results in a speed boost for the application. This is because there is no need to wait for the network.

添加缓存机制可确保不会一次又一次下载相同的信息。 此外，仅在需要时才进行API调用，避免重复会提高应用程序的速度。 这是因为不需要等待网络。

### 2.从延迟加载中受益 **(**2. Benefit from Lazy Loading**)** ###

[Lazy loading][] is loading something only when it is required. Whenever possible, try to lazy load the modules in the application. The benefit is twofold. First, it reduces the size of the application and second, as only the module that is required is loaded and not the unrequired ones, application boot time improves.

[延迟加载][Lazy loading]仅在需要时才加载某些内容。 尽可能尝试将模块延迟加载到应用程序中。 好处是双重的。 首先，它减小了应用程序的大小，其次，由于仅加载了所需模块，而不是不需要的模块，因此应用程序启动时间得以缩短。

### 3.部署合适的奉承者 **(**3. Deploy the Right Flattering Operator**)** ###

Instead of using a multitude of operators when a single operator can suffice reduces the code size. As different types of operators handle observables in different ways, deploying the incorrect operator might lead to unwelcome application behavior.

当一个运算符可以满足要求时，可以减少代码大小，而不是使用多个运算符。 由于不同类型的运算符以不同方式处理可观察对象，因此部署不正确的运算符可能会导致不受欢迎的应用程序行为。

Therefore, it is important to use the right flattering operator, such as concatMap and mergeMap, while dealing with observables.

因此，在处理可观察对象时，使用正确的恭维运算符(例如concatMap和mergeMap)很重要。

### 4.不要忘了使用Angular CLI **(**4. Don’t Forget to Make Use of Angular CLI**)** ###

It is highly recommended to make use of the [Angular CLI][] while developing an Angular project. There are several reasons for this, including a boost in productivity. Angular CLI flaunts an enormous set of commands for completing a number of tasks.

强烈建议在开发Angular项目时使用[Angular CLI][] 。 造成这种情况的原因有很多，其中包括提高生产率。 Angular CLI标榜了大量用于完成许多任务的命令。

Not only the Angular CLI creates components faster but also automatically references the same into their own modules. Moreover, it ensures compliance with the naming convention so that you don’t have to worry about doing it on your own.

Angular CLI不仅可以更快地创建组件，还可以自动将组件引用到自己的模块中。 而且，它确保遵守命名约定，因此您不必担心自己做。

### 5.不要错过使用生命周期挂钩的机会 **(**5. Don’t Miss Out a Chance to Use Lifecycle Hooks**)** ###

Whenever possible, use lifecycle hooks. Any [component][] has a lifecycle, which is managed by Angular. Angular creates, renders, creates children, and renders children of components. Further, it checks when a component’s data-bound properties change and penultimately destroys it before finally removing the same from the DOM.

尽可能使用生命周期挂钩。 任何[组件][component]都有生命周期，由Angular管理。 Angular创建，渲染，创建子代和渲染组件的子代。 此外，它会检查组件的数据绑定属性何时更改，并在最终将其从DOM中删除之前倒数第二个销毁它。

Lifecycle hooks provide the visibility into such key life moments as well as the ability to act when they occur. Some of the lifecycle hooks and their desirable uses include:

生命周期挂钩可提供对此类关键生命时刻的可见性，以及在它们发生时采取行动的能力。 一些生命周期挂钩及其理想用途包括：

*  *ngOnChanges ()* – Used for executing logic inside child components prompted by the modification of decorator parameters
    
    *ngOnChanges()* –用于在修饰器参数修改提示的情况下在子组件内部执行逻辑
 *  *ngOnDestroy ()* – Used for the need to perform a cleanup of resources when the component is destroyed
    
    *ngOnDestroy()* –用于销毁组件时需要执行的资源清理
 *  *ngOnInit ()* – Used when some data is required to be fetched from a database as soon as the component is instantiated
    
    *ngOnInit()* –实例化组件后需要从数据库中获取某些数据时使用

Know [more about Lifecycle hooks][].

了解[有关生命周期挂钩的更多信息][more about Lifecycle hooks] 。

### 6.确保使用Lint规则 **(**6. Ensure Using Lint Rules**)** ###

In order to avoid doing something that can potentially lead to the rise of some issue later, Angular have lint rules. When a lint rule is in place and you do something wrong, an error will quickly pop-up and save the day for you. You can easily configure various lint rules in the [tslint.json file][].

为了避免做可能在以后引起某些问题上升的事情，Angular制定了皮棉规则。 当执行规则时，如果您做错了什么，就会Swift弹出错误并为您节省时间。 您可以在[tslint.json文件中][tslint.json file]轻松配置各种棉绒规则。

Using lint rules in the code enforces consistency in the application as well as enhances readability. Some of the lint rules even come equipped with fixes for resolving the very issues that they correspond to. Moreover, you can [write your own lint rules using TSQuery][Lazy loading].

在代码中使用lint规则可增强应用程序的一致性，并增强可读性。 一些棉绒规则甚至配备了修复程序，用于解决它们所对应的问题。 此外，您可以[使用TSQuery编写自己的lint规则][Lazy loading] 。

### 7.隔离API黑客 **(**7. Isolate API Hacks**)** ###

Several Angular APIs are plagued by bugs and hence, require fixes. However, it is better to isolate API hacks in one place rather than adding them to the components where they are required. The API hacks can be isolated in a service and used from the component.

几个Angular API受到bug困扰，因此需要修复。 但是，最好将API hack隔离在一个地方，而不是将它们添加到需要它们的组件中。 可以将API hack隔离在服务中并从组件中使用。

But, why should you do it? Because doing so keep the hacks stay closer to the API. In addition to having all the hacks at one place, which makes fixing them easier and convenient, the action reduces the total code that is dealing with the unhacked code.

但是，为什么要这样做呢？ 因为这样做可以使hack保持更接近API。 除了将所有hacks集中在一个地方，这使得修复它们更加容易和方便之外，该操作还减少了处理未hacked代码的总代码。

### 8.保持您的应用程序干燥(不要重复自己) **(**8. Keep your Application DRY (Do not Repeat Yourself)**)** ###

Ensure that the same code is not copied in multiple sections of the complete codebase. In some cases, it might be required to change some logic in a particular code section. However, having identical code jotted down in multiple locations means that the change needs to be made at each and every section.

确保在完整代码库的多个部分中没有复制相同的代码。 在某些情况下，可能需要更改特定代码段中的某些逻辑。 但是，在多个位置添加相同的代码意味着需要在每个部分进行更改。

In addition to being a redundant job, this can lead to potential bug occurrences. Having a specific code at only one location not only makes the testing process easier but also improves application speed and performance.

除了成为多余的工作之外，这还可能导致潜在的错误发生。 在一个位置只有一个特定的代码，不仅使测试过程更加容易，而且还提高了应用程序的速度和性能。

### 9.从HttpModule切换到HttpClient **(**9. Switch to HttpClient from HttpModule**)** ###

Past Angular 4.3, there is a better way for handling HTTP requests via the [HttpClient library][]. Although the HttpModule library is adequate for handling HTTP requests, it is highly recommended to make a switch to the HttpClient.

在Angular 4.3之后，有一种更好的方法可以通过[HttpClient库][HttpClient library]处理HTTP请求。 尽管HttpModule库足以处理HTTP请求，但强烈建议您切换到HttpClient。

This is because aside from all the functionality, using HttpClient brings a number of benefits to the table. For instance, the [HttpErrorResponse][] class in the HttpClient library facilitates error handling. Additionally, HttpClient grants access to interceptors, which allow intercepting HTTP requests, and offers the ability to listen to progress events.

这是因为除了所有功能之外，使用HttpClient还可以为表带来许多好处。 例如，HttpClient库中的[HttpErrorResponse][]类有助于错误处理。 此外，HttpClient授予对拦截器的访问权限，该拦截器允许拦截HTTP请求，并提供侦听进度事件的功能。

### 10.退订Observables **(**10. Unsubscribe from Observables**)** ###

While subscribing to observables, ensure that appropriate unsubscribes to the same are also made. As the observable stream is left open, such as after a component is destroyed or the user has navigated to some other page, not unsubscribing from observables might lead to undesired memory leaks.

在订购可观察产品的同时，请确保也对它们进行了适当的退订。 由于可观察流保持打开状态，例如在组件被破坏或用户导航到其他页面之后，不取消订阅可观察流可能会导致不希望的内存泄漏。

So, how to unsubscribe from observables? Simple, by using operators such as take and takeUntil. Formulating a lint rule for the detection of observables that aren’t unsubscribed is highly recommended.

那么，如何退订观测值呢？ 使用诸如take和takeUntil之类的运算符，很简单。 强烈建议为检测未取消的可观察对象制定一个皮棉规则。

### 11.使用trackBy函数 **(**11. Use The trackBy Function**)** ###

Using the trackBy function with the [ngFor directive][] for looping over an array in templates return a unique identifier for each item in the array. When an array is changed, Angular re-renders the complete DOM tree. However, this isn’t the case when using the trackBy function.

使用trackBy函数和[ngFor指令][ngFor directive]在模板中循环访问数组时，将为数组中的每个项目返回唯一的标识符。 更改数组时，Angular重新渲染整个DOM树。 但是，使用trackBy函数时并非如此。

The trackBy function allows Angular to know those specific elements that have changed. Hence, it will only make DOM changes for that particular element or set of elements.

trackBy函数允许Angular知道已更改的那些特定元素。 因此，它将仅对该特定元素或元素集进行DOM更改。

### 12.使用RxJs运算符时，请使用管道运算符 **(**12. When Using RxJs Operators, Use Pipeable Operators**)** ###

This enables benefitting from the tree-shakeable ability of pipeable operators. Simply, it means that rather than the entire code, only the code that is necessary for execution will be included when these operators are imported. Moreover, another advantage is that it makes the identification of unused operators in the files easier.

这使您能够受益于管道运算符的可摇树能力。 简而言之，这意味着在导入这些运算符时，将仅包括执行所需的代码，而不是整个代码。 此外，另一个优点是，它使文件中未使用的运算符的标识更加容易。

**Let’s Wrap it Up!**

**让我们结束吧！**

Developing applications is a craft and there’s always some room for improvement. Adhering to the aforementioned Angular best practices will make your Angular application development life easier. The less buggy your Angular application is, the better is the chances for performance and productivity to mushroom.

开发应用程序是一种技巧，总会有一些改进的空间。 遵守上述Angular最佳实践将使您的Angular应用程序开发工作更加轻松。 Angular应用程序的bug越少，性能和生产率Swift提高的机会就越大。

The official Angular style guide is very important for any web developer looking to champion in the craft of Angular development. If you haven’t gone through it yet, now might be a good time to do so. Check it [here][]!

正式的Angular样式指南对于希望在Angular开发技术中脱颖而出的任何Web开发人员都非常重要。 如果您还没有经历过，那么现在可能是个好时机。 [在这里][here]检查！

> 翻译自: [https://www.thecrazyprogrammer.com/2018/11/angular-best-practices.html][https_www.thecrazyprogrammer.com_2018_11_angular-best-practices.html]

angular 最佳实践

[03de7a6de77cd70606c1230d55d1fb1e.png]: /images/20221123/403e04025432440c9258984850dfdb2c.png
[top 10 web development frameworks in 2018]: https://hackr.io/blog/top-10-web-development-frameworks-in-2018
[learn Angular]: https://hackr.io/tutorials/learn-angular
[Angular Best Practices]: /images/20221123/7569cfe3c30f4e7fb62fa1639d5dac12.png
[Lazy loading]: https://angularfirebase.com/lessons/how-to-lazy-load-components-in-angular-4-in-three-steps/
[Angular CLI]: https://cli.angular.io/
[component]: https://angular.io/guide/architecture-components
[more about Lifecycle hooks]: https://codecraft.tv/courses/angular/components/lifecycle-hooks/
[tslint.json file]: https://palantir.github.io/tslint/usage/configuration/
[HttpClient library]: https://angular.io/guide/http
[HttpErrorResponse]: https://angular.io/api/common/http/HttpErrorResponse
[ngFor directive]: https://blog.angular-university.io/angular-2-ngfor/
[here]: https://angular.io/guide/styleguide
[https_www.thecrazyprogrammer.com_2018_11_angular-best-practices.html]: https://www.thecrazyprogrammer.com/2018/11/angular-best-practices.html