Angular 2와 함께 사용해야 하는 폴더 구조 유형은 무엇입니까?

Angular 2와 함께 사용해야 하는 폴더 구조 유형은 무엇입니까?

저는 Angular 2에 대해 배우기 시작한 Angular 1 개발자입니다.폴더 구조 방법은 교육 자료에 따라 매우 다양합니다.저는 아래의 각 항목을 나열할 것이며, 제가 사용해야 하는 이유와 사용해야 하는 사람들의 의견을 듣고 싶습니다.또한 나열되지 않은 방법이 있지만 더 잘 작동한다고 생각되는 방법이 있다면 언제든지 나열해주시기 바랍니다.

이 모든 것을 보면 방법 #3은 제가 Angular 1 앱을 수행하던 방식과 거의 같습니다.

방법 1: Angular2-quickstart

출처: https://angular.io/guide/quickstart

폴더 구조:

방법 2: ng-book2

출처: https://www.ng-book.com/2/ (파일을 보려면 돈을 지불해야 합니다)

폴더 구조:

방법 3: mgechev/angular 2-seed

출처: https://github.com/mgechev/angular2-seed

폴더 구조:

공식 가이드라인은 지금 거기에 있습니다. mgechev/angular2-seed그것과 일치하기도 했습니다.#857 참조.

https://angular.io/guide/styleguide#overall-structural-guidelines

기능별로 프로젝트를 구성하는 것이 실용적인 방법이라고 생각합니다.이를 통해 프로젝트를 쉽게 확장하고 유지 관리할 수 있습니다.그리고 그것은 프로젝트의 각 부분이 완전한 자율성을 갖도록 합니다.이 구조에 대해 어떻게 생각하는지 아래에 알려주세요.각도 유형 스크립트 프로젝트 구조 – 각도 2

출처 : http://www.angulartypescript.com/angular-typescript-project-structure/

저는 이것을 사용할 것입니다.@Marin이 보여준 세 번째 것과 매우 유사합니다.

app
|
|___ images
|
|___ fonts
|
|___ css
|
|___ *main.ts*
|   
|___ *main.component.ts*
|
|___ *index.html*
|
|___ components
|   |
|   |___ shared
|   |
|   |___ home
|   |
|   |___ about
|   |
|   |___ product
|
|___ services
|
|___ structures

그래서 좀 더 조사한 후에 저는 방법 3(mgechev/angular2-seed)의 약간 수정된 버전을 사용하게 되었습니다.

기본적으로 구성요소를 메인 레벨 디렉토리로 이동한 다음 각 기능이 디렉토리 안에 있게 됩니다.

아마도 이런 구조일 것입니다.

|-- app
     |-- modules
       |-- home
           |-- [+] components
           |-- pages
              |-- home
              |-- home.component.ts|html|scss|spec
           |-- home-routing.module.ts
           |-- home.module.ts
     |-- core
       |-- authentication
           |-- authentication.service.ts|spec.ts
       |-- footer
           |-- footer.component.ts|html|scss|spec.ts
       |-- guards
           |-- auth.guard.ts
           |-- no-auth-guard.ts
           |-- admin-guard.ts 
       |-- http
           |-- user
               |-- user.service.ts|spec.ts
           |-- api.service.ts|spec.ts
       |-- interceptors
           |-- api-prefix.interceptor.ts
           |-- error-handler.interceptor.ts
           |-- http.token.interceptor.ts
       |-- mocks
           |-- user.mock.ts
       |-- services
           |-- srv1.service.ts|spec.ts
           |-- srv2.service.ts|spec.ts
       |-- header
           |-- header.component.ts|html|scss|spec.ts
       |-- core.module.ts
       |-- ensureModuleLoadedOnceGuard.ts
       |-- logger.service.ts
     |-- shared
          |-- components
              |-- loader
                  |-- loader.component.ts|html|scss|spec.ts
          |-- buttons
              |-- favorite-button
                  |-- favorite-button.component.ts|html|scss|spec.ts
              |-- collapse-button
                  |-- collapse-button.component.ts|html|scss|spec.ts
          |-- directives
              |-- auth.directive.ts|spec.ts
          |-- pipes
              |-- capitalize.pipe.ts
              |-- safe.pipe.ts
     |-- configs
         |-- app-settings.config.ts
         |-- dt-norwegian.config.ts
     |-- scss
          |-- [+] partials
          |-- _base.scss
          |-- styles.scss
     |-- assets

저는 최근에 ngcli를 사용하고 있는데, 제 코드를 구성하는 좋은 방법을 찾는 것이 정말 어려웠습니다.

제가 지금까지 본 것 중 가장 효율적인 것은 mrholek 저장소(https://github.com/mrholek/CoreUI-Angular) 입니다.

이 폴더 구조를 사용하면 루트 프로젝트를 깨끗하게 유지하고 구성 요소를 구성할 수 있으며, 공식 스타일 가이드의 중복된(때로는 쓸모없는) 명명 규칙을 피할 수 있습니다.

또한 이 구조는 필요할 때 가져오기를 그룹화하고 단일 파일에 대한 가져오기 행이 30개가 되지 않도록 하는 데 유용합니다.

src
|
|___ app
|
|   |___ components/shared
|   |   |___ header
|   |
|   |___ containers/layout
|   |   |___ layout1
|   |
|   |___ directives
|   |   |___ sidebar
|   |
|   |___ services
|   |   |___ *user.service.ts* 
|   | 
|   |___ guards
|   |   |___ *auth.guard.ts* 
|   |
|   |___ views
|   |   |___ about  
|   |
|   |___ *app.component.ts*
|   |
|   |___ *app.module.ts*
|   |
|   |___ *app.routing.ts*
|
|___ assets
|
|___ environments
|
|___ img
|   
|___ scss
|
|___ *index.html*
|
|___ *main.ts*

프로젝트 규모가 작고 규모가 작을 경우 유형별로 구성하는 것이 좋습니다(방법 2: ng-book2).

app
|- components
|  |- hero
|  |- hero-list
|  |- villain
|  |- ...
|- services
|  |- hero.service.ts
|  |- ...
|- utils
|- shared

프로젝트가 성장하려면 도메인별로 폴더를 구성해야 합니다(방법 3: mgechev/angular2-seed).

app
|- heroes
|  |- hero
|  |- hero-list
|  |- hero.service.ts
|- villains
|  |- villain
|  |- ...
|- utils
|- shared

공식 문서를 따르는 것이 좋습니다.
https://angular.io/guide/styleguide#://angular.io/guide/styleguide#application-structure-and-ngmodules

저는 다음과 같은 구조를 제안하는데, 이는 일부 기존 관례에 위배될 수 있습니다.

저는 경로에서 중복되는 이름을 줄이기 위해 노력했고, 일반적으로 짧게 이름 짓기를 계속하려고 노력했습니다.

따라서 /app/components/home/home.component.ts|html|css가 없습니다.

대신 다음과 같이 표시됩니다.

|-- app
    |-- users
        |-- list.ts|html|css
        |-- form.ts|html|css
    |-- cars
        |-- list.ts|html|css
        |-- form.ts|html|css
        |-- configurator.ts|html|css
    |-- app.component.ts|html|css
    |-- app.module.ts
    |-- user.service.ts
    |-- car.service.ts
|-- index.html
|-- main.ts
|-- style.css

제 것은 여기 있어요.

app
|
|-- shared (for html shared between modules)
|   |
|   |-- layouts
|   |   |
|   |   |-- default
|   |   |   |-- default.component.ts|html|scss|spec.ts
|   |   |   |-- default.module.ts
|   |   |
|   |   |-- fullwidth
|   |       |-- fullwidth.component.ts|html|scss|spec.ts
|   |       |-- fullwidth.module.ts
|   |
|   |-- components
|   |   |-- footer
|   |   |   |-- footer.component.ts|html|scss|spec.ts
|   |   |-- header
|   |   |   |-- header.component.ts|html|scss|spec.ts
|   |   |-- sidebar
|   |   |   |-- sidebar.component.ts|html|scss|spec.ts
|   |
|   |-- widgets
|   |   |-- card
|   |   |-- chart
|   |   |-- table
|   |
|   |-- shared.module.ts
|
|-- core (for code shared between modules)
|   |
|   |-- services
|   |-- guards
|   |-- helpers
|   |-- models
|   |-- pipes
|   |-- core.module.ts
|
|-- modules (each module contains its own set)
|   |
|   |-- dashboard
|   |-- users
|   |-- books
|       |-- components -> folders
|       |-- models
|       |-- guards
|       |-- books.service.ts
|       |-- books.module.ts
|
|-- material
|   |-- material.module.ts

언급URL : https://stackoverflow.com/questions/35346342/which-type-of-folder-structure-should-be-used-with-angular-2