[요약] Angular 프로젝트 관리를 위한 5가지 최고의 팁-JS 튜토리얼-php.cn

Angular 프로젝트를 구성하는 방법은 무엇입니까? 다음 기사에는 Angular 프로젝트 관리에 대한 5가지 주요 팁이 요약되어 있습니다. 이것이 여러분에게 도움이 되기를 바랍니다.

[요약] Angular 프로젝트 관리를 위한 5가지 최고의 팁

새로운 기능이 출시되면서 웹 앱의 크기가 점점 커지고 있습니다. 회사에서DevOps 이 릴리스 변경은 매일 발생합니다. Web apps 的体积越发大。在公司 DevOps 的过程中，这种发布变更每天都发生。

在如此高速的发布周期中，代码很快会变得笨拙。特别是基于 JavaScript 开发的项目，比如 NextJS 或者 Angular。

下面是我们在管理 Angular 项目中 5 个最好的实践，以达到最大的可读性，可维护性和可扩展性。

1. 准守单一职责原则

很多单应用程序核心是具有臃肿类的代码库。从本质上讲，这些臃肿的程序很难维护。从某种意义上讲，他们很脆弱，脆弱到更改一行代码可能对到整个程序产生灾难的影响。single responsibility principle 能阻止这些问题。

单一职责原则意味着组件有且仅有一个功能。

使用这种方法构建应用程序会产生一个模块化框架，其中应用程序是通过这些代码块串联在一块的。

使用这种方法能够让程序更易读和更好维护。也能够在应用中很好定位指定的功能。【相关教程推荐：angular教程、编程教学】

为了确保你的代码能够满足这种要求，你可以问自己一个问题：这代码是干什么的？如果自己的回答包含 and 这个关键字，那么你需要将你的代码重构为单一职责的代码。

构建 Angular 应用程序并对其扩展是一种持续性的练习。在不断的练习中，使用单一职责原则组织你的项目，将使你的应用程序干净，可读和可维护。

2. 绑定代码到模块中

Angular 中的 modules 是单一原则的实施。在 Angular 中，每一个模块代表一个分离的和独立的功能。

Angular 中提供了几种类型模块去指定如何对它们进行逻辑分组或组织。

Core

Core 模块是一个 NgModule，用来实例化应用并加载全局使用的核心功能。

所以，任何单例服务都应该在核心模块中实现。页头，页脚或者导航栏都是这种类型的模块。

每个应用程序有且只有一个实例的所有服务（单例服务）都应该在核心模块实现。例如鉴权服务或者用户服务。

Feature

功能模块代表构建应用程序功能的代码。比如，在一个线上购物的应用中，我们会有将商品添加到购物车的功能和用于付款的单独模块。

Shared

共享模块由可以被组合以创建新功能的模块组成。比如，搜索函数在平台中可以被用于多个功能。

以这种方式构建代码使事情更加容易定位并增加代码可重用性的机会。

3. 组织 SCSS 文件

如果不遵循通用结构，样式文件很快就会变得杂乱无章。一般最佳实践的模式 7-1 模式，该模式使用 7 个文件夹和 1

이렇게 빠른 릴리스 주기에서는 코드가 금방 다루기 어려워질 수 있습니다. 특히 NextJS 또는 Angular. 🎜🎜최대한의 가독성, 유지 관리성 및 확장성을 위해 Angular 프로젝트를 관리하는 5가지 모범 사례는 다음과 같습니다. 🎜

1. 단일 책임 원칙을 준수하세요

🎜 많은 단일 애플리케이션 코어는 부풀려진 클래스가 포함된 코드 기반입니다. 본질적으로 이러한 비대한 프로그램은 유지 관리가 어렵습니다. 코드 한 줄을 변경하면 전체 프로그램에 치명적인 영향을 미칠 수 있다는 점에서 취약합니다. 단일 책임 원칙을 통해 이러한 문제를 방지할 수 있습니다. 🎜🎜단일 책임 원칙은 구성 요소가 단 하나의 기능을 갖는다는 것을 의미합니다. 🎜🎜이 접근 방식을 사용하여 애플리케이션을 구축하면 애플리케이션이 이러한 코드 블록을 통해 서로 연결되는 모듈식 프레임워크가 생성됩니다. 🎜🎜이 방법을 사용하면 프로그램을 더 읽기 쉽고 유지 관리하기 쉽게 만들 수 있습니다. 또한 응용 프로그램에서 지정된 기능을 쉽게 찾을 수도 있습니다. [추천 관련 튜토리얼: Angular 튜토리얼, 프로그래밍 교육]🎜🎜귀하의 코드가 이 요구 사항을 충족하는지 확인하려면 다음 질문을 스스로에게 물어보세요. 이 코드는 무엇을 합니까? 답변에 and 키워드가 포함된 경우 코드를 단일 책임 코드로 리팩터링해야 합니다. 🎜🎜Angular 애플리케이션을 구축하고 확장하는 것은 지속적인 연습입니다. 시간이 지남에 따라 단일 책임 원칙을 사용하여 프로젝트를 구성하면 애플리케이션이 깔끔하고 읽기 쉽고 유지 관리 가능해집니다. 🎜

App - 프로젝트의 기본 폴더
Abstract - 모든 변수, 믹스인 및 유사한 구성 요소가 포함된 추상 섹션
Core - 프로젝트에 대한 타이포그래피, 재설정 및 상용구가 포함되어 있습니다. 전체 사이트 코드
Components - 버튼, 탭, 모달 등 웹 사이트용으로 생성되는 모든 구성 요소에 대한 스타일을 포함합니다.
Layout - 레이아웃을 정의하는 데 필요한 파일을 포함합니다. 헤더 및 페이지와 같은 사이트 Boots
Pages - 각 특정 페이지 스타일을 포함합니다
Vendors - 이 선택적 폴더는 bootstrap<code>bootstrap

为包含该特定文件夹所有代入的在每个文件夹中新建一个 all.scss 文件。

4. 将私有服务放到组件中

许多服务都被设计全局范围内运行。然后，在某些情况下，一个组件需要一个服务。传统的编码组件实践推荐单一责任原则。

在这种方法下，服务和组件被编写为单独的项目。

但是，考虑下入锅删除这些服务的组件会发生什么？你最终得到的是死代码，只会使得仓库变得更加混乱。在这种情况下，最佳实践是将服务放在组件内部。

这样，维护组件和服务就更加容易了。

5. 简化导入的 Angular 最佳实践

嵌套文件结构本质上比将所有代码文件都放在一个目录中的平面文件系统更加容易导航。

然而，随着项目的方法，项目的文件结构可能变得相当复杂。虽然这使得定位代码变得更加容易，但是当它在编写导入语句时提出了挑战。

当一个目录结构开始超过三个或者四个级别的时候， import 语句就会变得非常长并且难以阅读。

解决这个问题的，我们可以在 tsconfig.json 文件中配置路径的别名。在这个文件中，有个名为 compilerOptions 的数组。这个是你在应用程序中配置路径别名。

当代码编译后，在该数组中定义的路径别名会替换成真实的路径。每个路径的值是一个包含实际路径和别名的键值对对象。

构建 Angular

특정 폴더에 대한 모든 할당이 포함된 각 폴더에 새 all.scss 파일을 만듭니다.

4. 개인 서비스를 구성요소에 넣기
많은 서비스가 전 세계적으로 설계되었습니다. 범위. 그런 다음 구성 요소에 서비스가 필요한 경우도 있습니다. 전통적인 코딩 구성 요소 관행에서는 단일 책임 원칙을 권장합니다. 이 접근 방식에서는 서비스와 구성 요소가 별도의 프로젝트로 작성됩니다.

하지만 이러한 서비스의 구성 요소를 삭제하는 것을 고려하면 어떻게 될까요? 결국에는 데드 코드가 발생하여 창고가 더욱 복잡해집니다. 이 경우 가장 좋은 방법은 서비스를 구성 요소 내부에 배치하는 것입니다. 이렇게 하면 구성 요소와 서비스를 유지 관리하는 것이 더 쉬워집니다.