Angular2: 코어 모듈 대 공유 모듈

Angular2: 코어 모듈 대 공유 모듈

'?▁가 무엇인지 누가 설명해 줄 수 있습니까?SharedModule a 리고a.CoreModule무슨 뜻입니까?

저는 몇몇 프로젝트들이 각진 프로젝트를 만들기 위해 이 접근법을 사용하는 것을 보았습니다.

1. 모듈이 두 개 필요한 이유는 무엇입니까?
2. 제가 각각 언제 수입해야 하나요?
3. 거요?imports,exports,declarations각자가 가져야 합니까?

TLDR:

1. CoreModule만이 있어야 했습니다.services그리고 한 번만 수입됩니다.AppModule.
2. SharedModule을 제외한 모든 것을 가져야 합니다.services(" " " " "일")에서.AppModule).

그러나:

실제 모듈은 종종 의도적으로 [위] 지침에서 벗어난 하이브리드입니다.이 지침은 법률이 아닙니다. 다른 이유가 없는 한 이 지침을 따르십시오.

---

RTFM:

따라서 전체 NgModules의 문서(및 맥락을 이해하기 위한 기타 자료)를 검토한 후, 저는 그곳에서 귀하의 두 번째 및 세 번째 질문에 대한 답을 쉽게 찾았습니다.다음은 다음과 같습니다.

공유 모듈

• 성을 합니다.SharedModulecomponents,directives,그리고.pipes앱의 모든 곳에서 사용할 수 있습니다.으로 이모은전다구합니야다어성으로 되어야 합니다.declarations대부분은 수출되었습니다.

• 그SharedModule는 다른 모듈: 다음과보낼모위다있수내)을 다시 수 있습니다.CommonModule,FormsModule사용자가 가장 널리 사용하는 UI 컨트롤이 있는 모듈입니다.
• 그SharedModule가 없어야 .providers▁or▁또한 가져오거나 다시 내보낸 모듈에는 공급자가 없어야 합니다.이 가이드라인에서 벗어나면 자신이 무엇을 하고 있고 왜 그런지 알아야 합니다.
• SharedModule기능 모듈에서는 앱을 시작할 때 로드되는 기능과 나중에 로드하는 기능을 모두 사용할 수 있습니다.

코어 모듈

• 성을 합니다.CoreModule와 함께providers응용 프로그램이 시작될 때 로드하는 싱글톤 서비스의 경우.

• 수품CoreModuleAppModule로 직오를 하지 않습니다. 절대로 가져오지 않습니다.CoreModule다른 모듈에서.
• 만드는 것을 고려합니다.CoreModule가 없는 declarations.

비록 이것들이 더 상세하긴 하지만.TLDR위의 버전에서는 코딩을 계속할 수 있으며, 이해하기 위해 문서를 읽어야 하는 몇 가지 사항(예: '문서 모듈', '이전에 설명한 내용', '순수 서비스 모듈')을 언급하고 있으며, 첫 번째 질문에도 대답하지 않습니다.

그러니 그렇게 하도록 노력해요!

---

모듈이 두 개 필요한 이유는 무엇입니까?

당신은 두 개의 모듈이 필요하지 않습니다.문서에 있는 내용은 다음과 같습니다.

루트 모듈은 몇 가지 구성 요소가 있는 간단한 응용 프로그램에 필요한 모든 것입니다.

따라서 먼저 다른 질문을 하는 것이 중요합니다.

왜 사람들은 그들의 프로젝트를 여러 모듈로 구성합니까?

이에 대한 기본적인 설명은 문서에서 위의 설명 바로 뒤에 나옵니다.

앱이 성장함에 따라 루트 모듈을 관련 기능 모음을 나타내는 기능 모듈로 재팩터링합니다.그런 다음 이러한 모듈을 루트 모듈로 가져옵니다.

하지만 당신은 "왜?"라고 물었고, 이것은 기본적인 설명 이상을 필요로 합니다.이제 앱이 성장하기 시작하고 기능을 기능 모듈로 분리하지 않을 경우 발생할 수 있는 몇 가지 문제에 대해 설명하겠습니다.

• 루트 모듈은 모든 종속성(예: 타사 모듈)을 가져오고 모든 서비스를 제공하며 모든 구성 요소, 지침 및 파이프를 선언해야 하므로 읽기 및 사용하기 어려운 코드로 인해 혼란스러워지기 시작합니다.앱이 더 많이 필요할수록 이 모듈은 더 커질 것입니다.
• 서로 다른 기능들은 그들 사이에 명확한 경계가 없기 때문에 앱의 구조를 이해하는 것뿐만 아니라 팀에 대한 다른 책임을 지는 것이 더 어렵습니다.
• 앱의 다른 부분 간 충돌을 해결해야 할 수 있습니다.예를 들어, 앱의 서로 다른 두 부분에서 동일한 작업을 수행하는 지시어나 구성요소가 있는 경우에는 더 긴 이름을 사용하여 구분하거나 가져올 때 이름을 변경해야 합니다.

위의 예들이 정확히 문제가 아니라고 생각할 수도 있지만(혼자서 일을 하고 자신의 엉망진창인 상태에서 살 수도 있고 팀원 모두가 지저분할 수도 있음), 다른 사람들이 확실히 동의하지 않을 것이라는 점을 명심하십시오. 그렇기 때문에 여러분은 "여러 프로젝트를 보고 있습니다." 이 접근법을 사용합니다."

당신이 그것에 동의하고 당신의 성장하는 앱을 기능 모듈로 구성하기를 원하는 것을 고려하여, 문서의 다음 진술을 참조하십시오.

루트 모듈과 기능 모듈은 동일한 실행 컨텍스트를 공유합니다.이들은 동일한 종속성 인젝터를 공유합니다. 즉, 한 모듈의 서비스를 모두가 사용할 수 있습니다.

모듈에는 다음과 같은 중요한 기술적 차이점이 있습니다.

• 루트 모듈을 부팅하여 앱을 시작하고 기능 모듈을 가져와 앱을 확장할 수 있습니다.
• 기능 모듈은 다른 모듈에서 구현을 노출하거나 숨길 수 있습니다.

잊지 말아야 할 정보: "하나의 모듈에 있는 서비스는 모든 [모듈]이 사용할 수 있지만 구성요소, 지침 및 파이프와 같은 다른 것은 이를 사용하려는 각 모듈에 주입해야 합니다.

이 정보를 통해 다음 질문에 답함으로써 귀하가 알고자 하는 것에 더 가까이 다가갈 수 있습니다.

모든 기능 모듈이 동일합니까?

아니요! 루트 모듈만 있으면 안되지만 원하는 것은 무엇이든 할 수 있다는 제안이 있기 때문에 적어도 동일하지 않아야 합니다.하지만 그러면 안 됩니다.

문서에는 제안된 기능 모듈 그룹 간의 차이를 보여주는 표가 있습니다.그 중에서 발췌한 내용을 참조하십시오.

FEATURE   SHOULD HAVE    SHOULD HAVE   SHOULD HAVE
MODULE    DECLARATIONS   PROVIDERS     EXPORTS         

Domain    Yes            Rare          Top component   
Routed    Yes            Rare          No              
Routing   No             Yes (Guards)  RouterModule    
Service   No             Yes           No              
Widget    Yes            Rare          Yes             

차려!그들은 이것이...

...일부 애플리케이션에서 NgModules를 사용한 초기 경험을 바탕으로 한 예비 지침.

다시 말하지만, 여러분은 이 지침을 고수하지 않고 편차가 발생할 수 있습니다. 하지만 여러분은 여러분이 무엇을 하고 있고 그 이유를 알아야 합니다.

이제 이 표를 분석해 보겠습니다.

• 그Service그리고.Widget그룹은 각 열에서 그룹 간의 값이 완전히 다른 유일한 그룹입니다.
• 그Domain그리고.Routed으로 그은기으다같습다니음과로본적룹▁the▁와 같습니다.Widget그룹, 제한되거나 내보내기가 없는 경우에만 해당됩니다.
• 그Routing으로 그룹은기입로으니다본적입▁basically▁group니다▁is▁a.Service그룹(내보내기 예외가 있고 특정 공급자로 제한됨).

다음을 고려해 보겠습니다.Domain,Routed그리고.Routing는 된것: 다니뿐입변그룹의 입니다.Service또는Widget그리고 이 마지막 두 가지에 집중합니다.

서비스 부서에서 주의를 환기시켜야 합니다."한 모듈의 서비스를 모든 [모듈]이 사용할 수 있습니까?"라는 점을 잊지 마십시오.기능 모듈 그룹을 호출하면Services한 번만 가져올 수 있도록 다른 모듈에서 분리해야 하기 때문입니다.예를 들어, 당신은 다음을 가질 수 있습니다.UserModule▁like다▁consists▁that와 같은 서비스로 되어 있습니다.SignUpService,SignInService,SocialAuthService그리고.UserProfileService하는 UserModule모든 서비스를 앱 전체에서 사용할 수 있습니다.그리고 위의 표에 따르면, 그것은 단지 제공자들만 신고하거나 수출해서는 안 됩니다.

위젯은 더 일반적으로 들리지만, 뭔가를 알려줄 것입니다.또한 "구성요소, 지침 및 파이프와 같은 다른 것들은 사용하려는 각 모듈에 주입해야 합니다."라는 점을 잊지 마십시오.이 모듈은 이러한 모듈에 사용할 것입니다.예를 들어, 당신은 다음을 가질 수 있습니다.UIModule와 함께ButtonComponent,NavComponent,SlideshowComponent,HighlightLinkDirective,CtaPipe내보낸 요소 중 하나 또는 모두를 사용해야 할 때마다 다음과 같이 가져옵니다.UIModule.

따라서 기본적으로 Angular가 서비스를 처리하는 방식 때문에 기능 모듈로 기능을 분할하기 시작하면 서비스를 고유 모듈로 분리하고 다른 모듈은 원하는 대로 구성할 수 있습니다.

안녕하세요CoreModule그리고.SharedModule이 안에 들어맞습니까?

간단히 말하자면,CoreModule입니다.Service 및 참조SharedModule입니다.Widget모듈.그렇기 때문에 첫 번째를 다음에 한 번만 가져와야 합니다.AppModule그리고 그것이 필요한 모든 모듈에서 후자., 의내예터부로들위,터부▁the,UserModule가 수올있다니습에서 수 .CoreModule 리고그고.UIModuleSharedModule.

앞에서 가 발생할 수 은 러나앞에바같이지이, 지편수발있다니습생할의 을 선언합니다. 심지어 그들은 자신의 예에서 구성 요소를 다음과 같이 선언합니다.CoreModule하지만 관찰을 통해:

이 페이지 샘플은 [에서]를 선언하고 내보냄으로써 해당 조언에서 벗어납니다.CoreModule되는 두 요소 AppModule에서 선언한 루트 AppComponent 내에서만 사용되는 두 개의 구성 요소.이 지침을 엄격하게 준수하는 사람은 대신 앱 모듈에 이러한 구성 요소를 선언했을 것입니다.

---

개인적으로 가장 큰 혼란은 명명 선택에 관한 것이라고 생각합니다. 작업 등 이 예일으사, 앱것모있든는로이( 작업,, 로드바, 토스터 등될 것이라고 사람들은 입니다.CoreModule그리고 여러 기능에서 공유되는 모든 것은 다음과 같습니다.SharedModule.

는 "모듈 되며 어떤 도 "본질적으로" 는 안 의 소지가 있습니다.SharedModule뿐만 아니라NavbarComponent는 안 됩니다.CoreModule.

어떤 경우에도 지침을 따르지 않는 이유를 찾을 때까지 지침을 따르는 것이 좋습니다.

다음은 지침을 더 잘 이해하는 데 도움이 되는 위의 표의 나머지 부분입니다.

FEATURE   CAN BE                 SOME
MODULE    IMPORTED BY            EXAMPLES

Domain    Feature, AppModule     ContactModule (before routing)
Routed    Nobody                 ContactModule, DashboardModule,
Routing   Feature (for routing)  AppRoutingModule, ContactRoutingModule
Service   AppModule              HttpModule, CoreModule
Widget    Feature                CommonModule, SharedModule

건배!

저는 이 접근 방식을 사용하고 있으며, 그 이유/방법은 다음과 같습니다.
(하나의 접근 방식이고 다른 사람들도 != 아이디어를 가질 수 있습니다.)

나는 그것을 유지하는 것을 좋아합니다.app.module가능한 한 깨끗한.범용을 사용하거나 AOT로 프로젝트를 빌드하려면(angular-cli를 사용하지 않을 때) 중복된 app.module이 필요할 수 있습니다.

만약 여러분이 의 ,app.module당신은 그 목록을 다른 파일로 최신 상태로 유지해야 합니다.

, 그가옵니다자옵니▁the다▁comes▁here,자가가 나옵니다.core.module:
한 번만 가져오려는 모든 모듈을 여기에 놓습니다.주다음포함모듈이 있는 .forRoot메소드(프로바이더를 내보내고 한 번만 가져와야 하는 메소드).

여기에서 공급자도 가져옵니다.(예를 들어 ngrx를 사용하는 경우 여기에 스토어를 선언합니다.)

그음에다.shared.module:
앱 전체에 재사용해야 하는 모든 모듈(CommonModule, HttpModule, RouterModule, MaterialModule, FlexLayoutModule 등)을 배치합니다.

마내침.app.module:
로 가져오기app.module당신의.core.module 여기만.코어 모듈은 한 번만 로드해야 합니다.모든 서브모듈에서 다음을 로드할 수 있습니다.SharedModule.

이 구성을 사용하면 범용 또는 기타용으로 다른 app.module을 만들어야 하는 경우 전체 모듈 목록을 다른 파일로 복사하고 유지 관리할 필요가 없습니다.가오기만하됩다를 만 하면 .core.module당신은 가도 좋습니다

Angular 및 내 관측치의 스타일 가이드에 따르면:

코어 모듈(core.module.ts) 핵심 기능 모듈

싱글톤이어야 하는 모든 서비스는 여기에서 제공되어야 합니다.를 들어 를들면입니다.HelperService,LoggerService.

전체 구성 는 애플리케구요다소같음이합선니다야언으로 .CoreModule맘에 들다header,footer.

CoreModule은 하나 이상의 싱글톤 서비스를 제공합니다.Angular는 공급자를 앱 루트 인젝터에 등록하여 각 서비스의 싱글톤 인스턴스를 필요한 구성 요소가 해당 구성 요소가 열심히 로드되었는지 또는 게으르게 로드되었는지 여부에 관계없이 사용할 수 있도록 합니다.

루트 AppModule만 CoreModule을 가져와야 합니다.

공유 모듈(shared.module.ts) 공유 기능 모듈

해당 항목이 재사용되고 다른 기능 모듈에 선언된 구성 요소에서 참조될 때 공유 모듈의 구성 요소, 지시 및 파이프를 선언합니다.

사용하지 않는 것이 좋습니다.services공유 모듈에서.서비스는 일반적으로 전체 응용프로그램 또는 특정 기능 모듈에 대해 한 번 제공되는 싱글톤입니다.

모듈은 " " " "와 같이 .CommonModule&FormsModule.

공유 가능한 구성 요소/파이프/지시 선언은 공유 모듈에 있어야 합니다.이러한 구성 요소/파이프/지시를 다른 피쳐 모듈에서 사용해야 하는 경우 내보내야 합니다.

재료를 사용하는 경우 Angular Material 구성 요소를 가져오고 다시 내보내는 것이 가장 좋습니다.

참조:코어 모듈, 공유 모듈

이 질문은 너무 일반적이고 일반적인 질문에는 일반적인 답변이 있을 것입니다.예를 들어, 공유 모듈은 여러 구성 요소/모듈이 사용하는 것을 유지하기 위한 것입니다.

import { NgModule }            from '@angular/core';
import { CommonModule }        from '@angular/common'; 
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

//import { AwesomePipe }         from './awesome.pipe';
//import { HighlightDirective }  from './highlight.directive';

@NgModule({
  exports:      [ /*AwesomePipe, HighlightDirective,*/
                  CommonModule, FormsModule, ReactiveFormsModule ]
})
export class SharedModule { }

CoreModule은 페이지의 핵심으로 간주되는 것과 더 비슷합니다(Nav, Spinner, Alert...).이것은 매우 시사적이고 제가 생각하는 당신의 느낌에 달려 있습니다.예:

import { NgModule, Optional, SkipSelf } from '@angular/core';

import { NavComponent } from './nav/nav.component';
import { SpinnerComponent } from './spinner/spinner.component';
import { SpinnerService } from './spinner/spinner.service';
import { AlertComponent }     from './alert/alert.component';
import { AlertService }       from './alert/alert.service';

import { SharedModule }       from '../shared/shared.module';

import { CoreRoutingModule } from './core-routing.module';


@NgModule({
  imports: [ 
    SharedModule, 
    CoreRoutingModule,
  ],
  exports: [//Other modules use these components, so we export them
    AlertComponent, 
    NavComponent, 
    SpinnerComponent,

    ],
  declarations: [ //we use them in CoreModule, so we declare them
    AlertComponent, 
    NavComponent, 
    SpinnerComponent,

    ],
  providers: [
    SpinnerService, 
    AlertService,

  ]
})
export class CoreModule {
    constructor (@Optional() @SkipSelf() parentModule: CoreModule) {
      if (parentModule) {
        throw new Error(
          'CoreModule est déjà chargé. Importer le uniquement dans AppModule');
      }
    }
}

언급URL : https://stackoverflow.com/questions/42695931/angular2-coremodule-vs-sharedmodule