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 공급자를 사용하려면 각 위젯에 공급자를 등록하고 적절한 스크립트를 업데이트하십시오.