1

새로운 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의 다른 모든 구성 요소가 연결됩니다.

그러나 다른 모듈의 구성 요소를 사용해야하는 응용 프로그램 모듈은 foobar입니다. 공식 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.componentmodule1-list.component가로드 (또는 아래에 중첩) 받고자 지연 및 비 지연로드 요소. 결과적으로, 첫 번째 디렉토리 구조 접근법에서 지연로드 된 상위 구성 요소 (+module1) 아래에 module1-view.componentmodule1-list.component이있는 것은 잘못된 것처럼 보입니다.

당신은 어떻게 생각하십니까? 그것은 실제로 호환 되는가, 아니면 스타일 가이드에서 뭔가를 오독하고 있는가?

미리 감사드립니다.

답변

0

스타일 가이드를 잘못 읽고 있다고 생각합니다. 공유 구성 요소와 지시문에는 실제로 둘 이상의 상위 구성 요소에 중첩 된 구성 요소와 지시문 만 있어야합니다. 나는. 그리드 구성 요소의 헤더 구성 요소와 제품 목록 구성 요소가있는 경우 헤더 구성 요소를 공유 폴더에 두어야합니다. 또는 둘 이상의 다른 구성 요소에 중첩되어 있고 독립 실행 형 구성 요소가 아니거나 "기능 구성 요소"라고하는 유사한 구성 요소. 다른 예는 여러 구성 요소와 공유 할 수있는 서비스입니다. 결국 구조의 목적은 구성 요소를 신속하게 찾고 찾을 수 있기 때문에 그다지 중요하지 않습니다.

+0

답장을 보내 주셔서 감사합니다. 나는 당신의 요점을 보았지만, 나는 여전히 약간 혼란 스럽다. 나의 초기 질문에 대한 약간의 편집 후 :'module1-list.component'와'module1-view.component'는'foo-container.component'와'bar-container.component' 컴포넌트에서/아래에 중첩/사용됩니다. 또한, 'module1-container.component'는 라우터를 사용하여로드되기 때문에 지연로드 된 구성 요소 (따라서 폴더 이름의'+')입니다. 그러나,'module1-list.component'는 게으른로드 된 컴포넌트와로드되지 않은 컴포넌트 모두에서로드 할 수 있어야합니다. 결과적으로 게으른로드 된 폴더 아래에있는 것이 다소 잘못되었습니다. – AstrOne

관련 문제