Angular 공급자로 구성요소 재사용

  • 릴리스 버전: Washingtondc
  • 업데이트 날짜 2024년 02월 01일
  • 읽기3분
  • Angular 제공자는 여러 위젯에 삽입할 수 있는 재사용 가능한 구성 요소입니다. 빠른 로딩 위젯과 고성능 포털을 보장하려면 영구 데이터 및 추가 논리로 클라이언트 컨트롤러를 오버로드하는 대신 Angular 공급자를 생성하십시오. Angular 공급자를 사용하면 평생 서비스 포털 동안 데이터를 유지 관리하고 여러 위젯에서 구성 요소와 데이터 개체를 재사용할 수 있습니다.

    시작하기 전에

    필요한 역할: admin 또는 sp_admin

    이 태스크 정보

    Angular 제공자를 생성하면 다음을 수행할 수 있습니다.

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

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

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

    프로시저

    1. 다음으로 이동 모두 > Service Portal > 서비스 포털 구성 > 포털 테이블 > 위젯 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 제공자를 사용하려면 각 위젯에 제공자를 등록하고 적절한 스크립트를 업데이트하십시오.