AngularJS : ngInclude 대 지시문

언제 지시문을 사용하고 언제 nginclude를 사용하는 것이 더 적절한 지 잘 모르겠습니다. 이 예를 들어 보겠습니다. 부분적 password-and-confirm-input-fields.html으로 암호를 입력하고 확인하는 html이 있습니다. 나는 가입 페이지와 암호 변경 페이지에서 이것을 사용합니다. 이 두 페이지에는 각각 컨트롤러가 있고 부분 html에는 전용 컨트롤러가 없습니다.

지시문을 사용해야합니까 ngInclude?

그것은 모두 코드 조각에서 원하는 것에 달려 있습니다. 개인적으로 코드에 로직이 없거나 컨트롤러가 필요하지 않으면 ngInclude. 일반적으로 여기에보기를 복잡하게 만들고 싶지 않은보다 큰 "정적"html 조각을 넣습니다. (예 : 어쨌든 부모 컨트롤러에서 데이터를 가져 오는 큰 테이블을 가정 해 봅시다. <div ng-include="bigtable.html" />모든 라인이 뷰를 어지럽히 는 것보다 더 깔끔합니다 )

논리, DOM 조작이 있거나 사용되는 다른 인스턴스에서 사용자 정의 가능 (다른 방식으로 렌더링) directives이 필요한 경우 더 나은 선택입니다 (처음에는 어렵지만 매우 강력합니다. 시간을 줘) .

ngInclude

때때로 당신은 ngInclude's그들의 외부 $scope/ interface. 크고 복잡한 중계기와 같이 말할 수 있습니다. 이 두 인터페이스는이 때문에 함께 연결됩니다. 주요 $scope내용이 변경되면 포함 된 부분 내에서 논리를 변경 / 변경해야합니다.

지시어

반면에 지시문 은 명시 적 범위 / 컨트롤러 등을 가질 수 있습니다. 따라서 무언가를 여러 번 재사용해야하는 시나리오를 생각하고 있다면 자체 범위를 연결하면 삶이 얼마나 쉽고 덜 쉬워 지는지 알 수 있습니다. 혼란 스럽습니다.

또한 DOM과 상호 작용할 때마다 지시문을 사용해야합니다. 이것은 테스트를 위해 더 좋게 만들고, 컨트롤러 / 서비스 등에서 이러한 작업을 분리합니다.

팁 : 만들기 확실 하지 제한 사용하는 'E'를 당신이 IE8에 대해 걱정하는 경우! 이 문제를 해결하는 방법이 있지만 성가시다. 삶을 더 쉽게 만들고 속성 등을 고수하십시오.<div my-directive />

구성 요소 [2016 년 3 월 1 일 업데이트]

Angular 1.5에 추가되었으며 기본적으로 .directve(). 대부분의 경우 구성 요소를 사용해야합니다. 많은 상용구 지시문 코드를 제거하며 기본적으로 restrict: 'E', scope : {}, bindToController: true. Angular2로 더 쉽게 전환 할 수 있도록 앱의 거의 모든 것에 사용하는 것이 좋습니다.

결론적으로:

대부분의 경우 구성 요소 및 지침을 만들어야 합니다.

• 더 확장 가능
• 템플릿을 사용하고 파일을 외부에서 사용할 수 있습니다 (예 : ngInclude)
• 부모 범위를 사용하거나 지시문 내 에서 자체 격리 범위 를 사용하도록 선택할 수 있습니다 .
• 애플리케이션 전체에서 더 나은 재사용

2016 년 3 월 1 일 업데이트

이제 Angular 2가 천천히 마무리되고 있으며 일반적인 형식을 알고 있습니다 (물론 여기 저기 일부 변경 사항이있을 것입니다). 얼마나 중요한지 추가하고 싶었습니다 components(때로는 제한해야하는 경우 지시문 : ' 예를 들어 E ').

구성 요소는 Angular 2 와 매우 유사 합니다 @Component. 이런 식으로 우리는 동일한 영역에서 논리와 HTML을 캡슐화합니다.

구성 요소에 최대한 많은 것을 캡슐화하십시오. Angular 2로 훨씬 쉽게 전환 할 수 있습니다! (전환을 선택한 경우)

다음은이 마이그레이션 프로세스를 설명하는 멋진 문서 directives입니다 (물론 구성 요소를 사용하려는 경우 매우 유사 함) : http://angular-tips.com/blog/2015/09/migrating-directives-to-angular-2/