새로운 Angular 2 애플리케이션 개발을 시작했으며 공식 Angular 2 스타일 가이드를 따르려고합니다. 내 응용 프로그램의 대부분은 서로에 대해 알지 못하는 일련의 모듈 (약 10 개)로 구성됩니다. 결과적으로 나는 느린 로딩을 사용하고 Angular 2 라우터를 통해 이러한 모듈에 액세스 할 수 있습니다. 상기 도면에서 거의 모든 구성 요소를 공유 할 때 Angular 2 디렉토리 구조와 혼동 됨
|- app
| |- +module1
| | |- module1-list
| | | |- module1-list.component.html
| | | |- module1-list.component.ts
| | |- module1-view
| | | |- module1-view.component.html
| | | |- module1-view.component.ts
| | |- shared
| | | |- module1.model.ts
| | | |- module1.service.ts
| | |- module1-container.component.html
| | |- module1-container.component.ts
| |- +module2
| | |- <same structure with module1>
은
moduleX-container.component
성분 라우터 가리키는 페이지이다.
moduleX
의 다른 모든 구성 요소가 연결됩니다.
그러나 다른 모듈의 구성 요소를 사용해야하는 응용 프로그램 모듈은 foo
과 bar
입니다. 공식 Angular 2 스타일 가이드에 따르면 공유 구성 요소는 shared
폴더 아래에 있어야합니다. 그 결과 내 디렉토리 구조는 다음과 같이됩니다 : 당신이 볼 수 있듯이
|- app
| |- +foo (this makes use of all the components under /app/shared/)
| | |- foo-container.component.html
| | |- foo-container.component.ts
| |- +bar (this makes use of all the components under /app/shared/)
| | |- bar-container.component.html
| | |- bar-container.component.ts
| |- +module1
| | |- module1-container.component.html
| | |- module1-container.component.ts
| |- +module2
| | |- module2-container.component.html
| | |- module2-container.component.ts
| |- shared
| | |- module1
| | | |- module1-list
| | | | |- module1-list.component.html
| | | | |- module1-list.component.ts
| | | |- module1-view
| | | | |- module1-view.component.html
| | | | |- module1-view.component.ts
| | | |- shared
| | | | |- module1.model.ts
| | | | |- module1.service.ts
| | |- module2
| | | |- <same structure with module1>
, 지금은 거의 모든 내 코드가 shared
폴더에 배치됩니다. 결과적으로 응용 프로그램 폴더에 지연로드 된 구성 요소 (+
으로 시작하는 구성 요소)는 공유 구성 요소에 액세스하는 페이지의 와이어 프레임을 보유하게됩니다. 그게 좋은 구조인가요? 공식 Angular 2 스타일 가이드와 호환되는 것 같지만 동시에 shared
폴더 아래에 내 코드의 95 %를 갖는 것이 이상하다고 느낍니다.
EDIT 1
또한, I는 module1-view.component
및 module1-list.component
가로드 (또는 아래에 중첩) 받고자 지연 및 비 지연로드 요소. 결과적으로, 첫 번째 디렉토리 구조 접근법에서 지연로드 된 상위 구성 요소 (+module1
) 아래에 module1-view.component
및 module1-list.component
이있는 것은 잘못된 것처럼 보입니다.
당신은 어떻게 생각하십니까? 그것은 실제로 호환 되는가, 아니면 스타일 가이드에서 뭔가를 오독하고 있는가?
미리 감사드립니다.
답장을 보내 주셔서 감사합니다. 나는 당신의 요점을 보았지만, 나는 여전히 약간 혼란 스럽다. 나의 초기 질문에 대한 약간의 편집 후 :'module1-list.component'와'module1-view.component'는'foo-container.component'와'bar-container.component' 컴포넌트에서/아래에 중첩/사용됩니다. 또한, 'module1-container.component'는 라우터를 사용하여로드되기 때문에 지연로드 된 구성 요소 (따라서 폴더 이름의'+')입니다. 그러나,'module1-list.component'는 게으른로드 된 컴포넌트와로드되지 않은 컴포넌트 모두에서로드 할 수 있어야합니다. 결과적으로 게으른로드 된 폴더 아래에있는 것이 다소 잘못되었습니다. – AstrOne