Ionic Angular: 프로젝트 구조 제안

Ionic Angular 프로젝트를 일반적으로 관리하는 방법을 공유하고 싶습니다.
ionic generate 명령을 사용하여 Ionic Angular 프로젝트에서 사용할 수 있는 Angular 기능을 얻을 수 있습니다.

> page 
  component 
  service 
  module 
  class 
  directive 
  guard 
  class 
  directive 
  guard 
  pipe 
  interface 
  enum 

나는 보통 사용 사례보다는 유형(구성 요소, 서비스, 가드 등)에 따라 구분하고 그룹화합니다. 프로젝트 구조를 더 깔끔하게 만들고 내보낸 선언 또는 모듈을 가져오는 구문을 단순화할 수 있습니다.

다음은 내가 일반적으로 적용하는 구조의 예입니다.

src
├── app
    ├── components
        └── search
            ├── search.component.html
            ├── search.component.scss
            └── search.component.ts
    ├── directives
        ├── disable-click.directive.ts
        └── highlight.directive.ts
    ├── enums
        ├── colors.ts
        └── genders.ts
    ├── guards
        └── auth.guard.ts
    ├── modals
        └── student-info
            ├── student-info.module.ts
            ├── student-info.page.html
            ├── student-info.page.scss
            └── student-info.page.ts
    ├── models
        └── student.ts
    ├── pages
        └── home
            ├── home-routing.module.ts
            ├── home.module.ts
            ├── home.page.html
            ├── home.page.scss
            └── home.page.ts
        └── login
            ├── login-routing.module.ts
            ├── login.module.ts
            ├── login.page.html
            ├── login.page.scss
            └── login.page.ts
    ├── pipes
        └── date.pipe.ts
    ├── services
        ├── auth.service.ts
        └── env.service.ts
    ├── utils
        ├── animations.ts
        └── validators.ts
├── assets
├── environments
├── theme
├── global.scss
├── index.html
├── main.ts
├── polyfills.ts
├── test.ts
└── zone-flags.ts

키 포인트

components : 이 폴더는 모듈이 없는 모든 비페이지 구성 요소로 구성됩니다.
directives : 이 폴더는 모든 Angular 지시문으로 구성됩니다.
enums : 이 폴더는 모든 열거형으로 구성됩니다.
guards : 이 폴더는 모든 Angular 가드로 구성됩니다.
modals : 이 폴더는 라우팅에 사용되지 않고 Ionic 모달에 사용되는 모든 페이지 구성 요소로 구성됩니다.
models : 이 폴더는 MVC의 모델 또는 소위 DTO(Data Transfer Object)를 나타내는 데 사용되는 모든 클래스로 구성됩니다.
pages : 이 폴더는 라우팅에 사용해야 하는 모든 페이지 구성 요소로 구성됩니다.
pipes : 이 폴더는 모든 Angular 파이프로 구성됩니다.
services : 이 폴더는 모든 Angular 삽입 가능 서비스로 구성됩니다.
utils : 이 폴더는 모든 도우미 클래스 또는 함수로 구성됩니다.

예시

이 구조를 보여주기 위해 예제 프로젝트를 만들지는 않았지만 제 Ionic 앱Simple QR을 실제 참조로 사용할 수 있습니다.

이것이 당신을 도울 수 있기를 바랍니다. 즐거운 코딩하세요!