AngularJS의 폴더 구조

이 기사에서는 크고 확장 가능한 AngularJS 애플리케이션의 폴더 구조를 레이아웃하는 방법을 보여줍니다.

AngularJS의 폴더 구조

우리의 Angular 애플리케이션은 성장하고 있으며 우리의 구조가 적응하기를 원합니다. 앱이 성장함에 따라 앱이 성장하는 동안에도 쉽게 관리하고 유지 관리할 수 있도록 구조화하는 것이 더욱 중요해졌습니다.

애플리케이션을 더 쉽게 이해, 유지 및 관리할 수 있도록 하는 두 가지 접근 방식이 있습니다. 첫 번째는 파일을 해당 유형별로 정렬하는 것입니다.

예를 들어 Controllers 폴더에 Controllers, View 폴더에 Views, Services 폴더에 Services 정렬.

왼쪽에서는 파일을 유형별로 정렬한 유형별 정렬을 사용하고 있습니다. 이 폴더 구조는 views, controllers 및 services가 거의 없는 소규모 애플리케이션에 유용합니다.

그러나 30~40개의 controllers, views, services가 있는 경우 원하는 파일을 찾기가 매우 어려울 것이라고 상상해 보십시오.

두 번째 방법(오른쪽)은 기능별 정렬로 파일을 기능별로 정렬합니다. 이것은 더 크고 확장 가능한 응용 프로그램을 위해 폴더 구조를 정렬하는 가장 좋은 방법입니다. 이 방법은 이해, 유지 및 관리하기 쉽습니다.

이미지 오른쪽에 있는 기능별로 파일을 정렬했습니다. 각 기능에 대한 폴더를 만들었습니다.

각 폴더에는 특정 기능에 대한 view, service 및 controller가 포함되어 있습니다. 우리가 찾고 있는 기능을 찾고 편집하는 것은 매우 쉽습니다.