Angular 공급자를 통해 구성요소 재사용

Angular 제공자는 여러 위젯에 삽입할 수 있는 재사용 가능한 구성 요소입니다. 빠른 로딩 위젯과 고성능 포털을 보장하려면 영구 데이터와 추가 로직으로 클라이언트 컨트롤러에 과부하를 주는 대신 Angular 공급자를 생성하십시오. Angular 공급자를 사용하면 수명 서비스 포털 기간 동안 데이터를 유지 관리하고 여러 위젯에서 구성 요소 및 데이터 객체를 재사용할 수 있습니다.

시작하기 전에

필요한 역할: admin 또는 sp_admin

이 태스크 정보

Angular 공급자를 만들면 다음을 수행할 수 있습니다.

• 기록 또는 필터를 변경할 때 위젯을 동기화 상태로 유지합니다.
• 위젯 간에 컨텍스트를 공유합니다.
• 상태를 유지하고 유지합니다.
• 동작을 만들어 여러 위젯에 삽입합니다.

자세한 내용은 Angular 공급자를 참조하세요.

팁:

보다 손쉬운 유지관리 및 문제 해결을 위해 위젯 [sp_widget] 테이블의 Angular 제공자 관련 목록에서 사용하지 않는 제공자를 제거합니다.

프로시저

1. 다음으로 이동 모두 > 서비스 포털 > 서비스 포털 구성 > 포털 테이블 > 위젯 Angular 제공자.
   위젯 Angular 제공자 테이블이 열립니다.
2. 새로 만들기를 클릭하여 새 기록을 생성합니다.
3. Angular 제공자의 유형을 선택합니다.
   • 지침
   • 공장
   • 서비스
   ECMAScript 6 이상으로 쉽게 마이그레이션하려면 팩토리를 통해 서비스를 사용하는 것이 좋습니다.
4. 이름을 정의합니다.
   이 이름을 사용하여 제공자를 위젯에 연결합니다.
5. 클라이언트 스크립트 필드에 스크립트를 추가합니다.

   미국 통화로 숫자 형식을 지정하는 기본 팩토리입니다.

   function formatterFactory(){
     var myVal = Number;
     return {
       format: function(myVal) {
         return '$' + myVal.toFixed(2);
       }
     }
   }

6. Angular 제공자를 위젯과 연결합니다.
   1. <yourInstanceURL>/sp_config?id=widget_edit로 이동합니다.
   2. Angular 제공자와 연결할 위젯을 엽니다.
   3. 관련 목록에서Angular 공급자를 선택합니다.
   4. Angular 공급자 목록에서 새로 만들기를 클릭합니다.
   5. Angular 제공자 필드에서 적절한 제공자를 선택합니다.
   6. 위젯 필드를 확인하여 Angular 공급자를 올바른 위젯과 연결하고 있는지 확인합니다.
   7. 저장을 클릭합니다.
7. 위젯에서 적절한 스크립트를 업데이트하여 위젯에 Angular 제공자를 삽입합니다.

   팩토리의 이름을 클라이언트 컨트롤러 함수의 인수로 전달하여 팩토리를 위젯 클라이언트 스크립트에 삽입합니다. 그런 다음 위젯 클라이언트 스크립트의 팩토리 함수에 정의된 객체에 액세스할 수 있습니다.

   function(formatterFactory) {
     /* widget controller */
     var c = this;
     console.log(formatterFactory.format(300));
   }

   지시문을 정의하는 경우 위젯 HTML 템플릿에서 지시문을 사용합니다.

8. 위젯에 등록된 후 Angular 제공자를 편집하려면 위젯 편집기에서 Angular 제공자 클라이언트 스크립트를 엽니다.
   1. 다음으로 이동 서비스 포털 구성 > 위젯 편집기.
   2. 기존 위젯 편집에서 Angular 공급자와 연결된 위젯을 선택합니다.
   3. 표시 메뉴에서 종속성 목록을 열고 Angular 공급자를 선택합니다.
      주:

      위젯과 연결된 Angular 공급자만 종속성 목록에 표시됩니다. 이 목록에는 위젯이 종속된 모든 외부 자원이 포함됩니다.
      Angular 제공자 클라이언트 스크립트가 위젯 편집기에 표시됩니다. 위젯 편집기 인터페이스에서 위젯과 제공자 스크립트를 동시에 편집하고 저장할 수 있습니다.

다음에 수행할 작업

여러 위젯과 함께 Angular 공급자를 사용하려면 각 위젯에 공급자를 등록하고 적절한 스크립트를 업데이트하십시오.