Angular 프로젝트 관리를 위한 5가지 실용적인 팁(요약 공유)

Angular 프로젝트를 구성하는 방법은 무엇인가요? 다음 기사는 Angular 프로젝트 관리에 대한 5가지 실용적인 팁을 모아서 공유합니다. 모든 사람에게 도움이 되기를 바랍니다.

새로운 기능이 출시되면서 웹 앱의 크기가 점점 커지고 있습니다. 회사Web apps 的体积越发大。在公司 DevOps 的过程中，这种发布变更每天都发生。【相关教程推荐：《angular教程》】

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

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

1. 准守单一职责原则

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

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

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

使用这种方法能够让程序更易读和更好维护。也能够在应用中很好定位指定的功能。

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

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

2. 绑定代码到模块中

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

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

Core

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

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

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

Feature

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

Shared

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

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

3. 组织 SCSS 文件

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

진행 과정에서, 이 릴리스 변경 사항은 매일 발생합니다. [관련 추천 튜토리얼: "
• angular Tutorial

  "]이렇게 빠른 릴리스 주기에서는 코드가 금방 다루기 어려워집니다. 특히 NextJS

  또는 앵글
.

• 최대한의 가독성, 유지 관리성 및 확장성을 위해 Angular 프로젝트를 관리하는 5가지 모범 사례는 다음과 같습니다.

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

많은 싱글의 핵심 응용 프로그램은 부풀려진 클래스가 있는 코드 기반입니다. 본질적으로 이러한 비대한 프로그램은 유지 관리가 어렵습니다. 코드 한 줄을 변경하면 전체 프로그램에 치명적인 영향을 미칠 수 있다는 점에서 취약합니다. 단일 책임 원칙
• 을 통해 이러한 문제를 방지할 수 있습니다.

  단일 책임 원칙은 구성 요소가 단 하나의 기능을 갖는다는 것을 의미합니다.

  이 접근 방식을 사용하여 애플리케이션을 구축하면 애플리케이션이 이러한 코드 블록을 통해 서로 연결되는 모듈식 프레임워크가 생성됩니다.
• 이 방법을 사용하면 프로그램을 더 읽기 쉽고 유지 관리하기 쉽게 만들 수 있습니다. 또한 응용 프로그램에서 지정된 기능을 쉽게 찾을 수도 있습니다.

  귀하의 코드가 이 요구 사항을 충족하는지 확인하려면 다음 질문을 자문해 보세요. 이 코드의 기능은 무엇인가요? 답변에 and 키워드가 포함된 경우 코드를 단일 책임 코드로 리팩터링해야 합니다.

  Angular 애플리케이션을 구축하고 확장하는 것은 지속적인 연습입니다. 시간이 지남에 따라 단일 책임 원칙을 사용하여 프로젝트를 구성하면 애플리케이션이 깔끔하고 읽기 쉽고 유지 관리 가능해집니다.
• 2. 코드를 모듈에 바인딩

  Angularmodules in /code>는 단일 원칙을 구현한 것입니다. Angular에서 각 모듈은 별도의 독립적인 기능을 나타냅니다.

Angular는 논리적으로 그룹화하거나 구성하는 방법을 지정하는 여러 유형 모듈을 제공합니다.

• Core

  🎜 Core 모듈은 애플리케이션을 인스턴스화하고 전역 사용을 위해 핵심 기능을 로드하는 데 사용되는 NgModule입니다. 🎜🎜그래서 모든 싱글톤 서비스는 코어 모듈에서 구현되어야 합니다. 머리글, 바닥글 또는 탐색 표시줄은 이 유형의 모듈입니다. 🎜🎜애플리케이션당 인스턴스가 하나만 있는 모든 서비스(싱글톤 서비스)는 핵심 모듈에서 구현되어야 합니다. 예를 들어 인증 서비스 또는 사용자 서비스입니다. 🎜🎜🎜Feature🎜🎜🎜Feature 모듈은 애플리케이션 기능을 구축하는 코드를 나타냅니다. 예를 들어, 온라인 쇼핑 애플리케이션에서는 장바구니에 품목을 추가하는 기능과 결제를 위한 별도의 모듈이 있습니다. 🎜🎜🎜Shared🎜🎜🎜공유 모듈은 결합하여 새로운 기능을 만들 수 있는 모듈로 구성됩니다. 예를 들어 검색 기능은 플랫폼의 여러 기능에 사용될 수 있습니다. 🎜🎜이런 방식으로 코드를 구성하면 항목을 더 쉽게 찾을 수 있고 코드 재사용 가능성이 높아집니다. 🎜

  🎜3. SCSS 파일 정리🎜

  🎜공통 사항을 따르지 않는 경우 구조, 스타일 파일은 빠르게 복잡해질 수 있습니다. 아래와 같이 7 폴더와 1 파일을 사용하는 일반적인 모범 사례 패턴 7-1 패턴: 🎜🎜 🎜🎜🎜App🎜 - 프로젝트의 기본 폴더 🎜🎜🎜🎜🎜Abstract🎜 - 모든 변수, 믹스인 및 유사한 구성 요소를 포함하는 추상 섹션 🎜🎜🎜🎜🎜Core🎜 - 전체 사이트에 대한 레이아웃, 재설정 및 상용구 코드 포함 🎜🎜🎜🎜 🎜Components🎜 - 버튼, 탭, 모달 등 웹 사이트용으로 생성되는 모든 구성 요소의 스타일이 포함되어 있습니다. 🎜🎜🎜🎜🎜Layout🎜 - 머리글, 바닥글 등 사이트 레이아웃을 정의하는 데 필요한 파일이 포함되어 있습니다. 🎜🎜🎜🎜🎜Pages🎜 - 각 특정 페이지에 대한 스타일을 포함합니다🎜

• Vendors - 이 선택적 폴더는 특정 폴더에 대한 모든 대체 항목이 포함된 각 폴더에 대해 bootstrapbootstrap

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

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

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

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

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

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

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

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

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

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

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

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

构建 Angular

과 같은 부트스트랩 프레임워크를 사용하는 프로젝트에 적합합니다. all.scss 파일을 .

4. 비공개 서비스를 구성요소에 넣기

많은 서비스가 디자인 운영됩니다. 전 세계적으로. 그런 다음 구성 요소에 서비스가 필요한 경우도 있습니다. 전통적인 코딩 구성 요소 관행에서는 단일 책임 원칙을 권장합니다.

이 접근 방식에서는 서비스와 구성 요소가 별도의 프로젝트로 작성됩니다. 하지만 이러한 서비스의 구성 요소를 삭제하는 것을 고려하면 어떻게 될까요? 결국에는 데드 코드가 발생하여 창고가 더욱 복잡해집니다. 이 경우 가장 좋은 방법은 서비스를 구성 요소 내부에 배치하는 것입니다.

🎜이렇게 하면 구성 요소와 서비스를 유지 관리하는 것이 더 쉬워집니다. 🎜

🎜5. 가져오기 단순화를 위한 Angular 모범 사례🎜

🎜중첩된 파일 구조 본질적으로 더 쉽습니다. 모든 코드 파일을 하나의 디렉터리에 저장하는 플랫 파일 시스템보다 탐색하기 쉽습니다. 🎜🎜그러나 프로젝트가 가까워질수록 프로젝트의 파일 구조가 상당히 복잡해질 수 있습니다. 이렇게 하면 코드를 더 쉽게 찾을 수 있지만 import 문을 작성할 때 문제가 발생합니다. 🎜🎜디렉토리 구조가 3~4개 수준 이상으로 커지기 시작하면 import 문이 매우 길어져 읽기 어려울 수 있습니다. 🎜🎜이 문제를 해결하려면 tsconfig를 사용할 수 있습니다. json🎜 파일의 구성 경로에 대한 별칭입니다. 이 파일에는 compilerOptions라는 배열이 있습니다. 이는 애플리케이션에서 구성하는 경로 별칭입니다. 🎜🎜코드가 컴파일되면 이 배열에 정의된 경로 별칭이 실제 경로로 대체됩니다. 각 경로의 값은 실제 경로와 별칭을 포함하는 키-값 개체입니다. 🎜🎜Angular 애플리케이션을 구축하고 확장하는 것은 지속적인 연습입니다. 🎜🎜🎜이 글은 무료 번역 형식의 번역입니다. 🎜🎜원본 주소: https://www.adservio.fr/post/how-to-organize-angular-project-top-5-tips🎜🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 비디오🎜를 방문하세요! ! 🎜

위 내용은 Angular 프로젝트 관리를 위한 5가지 실용적인 팁(요약 공유)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!