주요 콘텐츠로 건너뛰기

Angular와의 통합

팁

이 가이드는 Angular의 개념과 패턴에 익숙하다고 가정합니다. 기본 내용은 Angular documentation을 참고하세요.

DHTMLX Kanban은 Angular와 호환됩니다. 전체 코드 예제는 GitHub에서 확인할 수 있습니다.

프로젝트 생성​

정보

프로젝트를 생성하기 전에 Angular CLI와 Node.js를 설치하세요.

아래 명령어를 실행하면 Angular CLI로 새 my-angular-kanban-app 프로젝트가 생성됩니다:

ng new my-angular-kanban-app
노트

이 가이드를 따르려면, 새 Angular 앱을 생성할 때 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG/Prerendering)을 비활성화하세요!

위 명령어는 필요한 모든 도구를 설치합니다. 추가 명령어를 실행할 필요가 없습니다.

의존성 설치​

새로 생성한 앱 디렉토리로 이동하세요:

cd my-angular-kanban-app

yarn 패키지 관리자로 의존성을 설치하고 개발 서버를 시작하세요:

yarn
yarn start

앱은 로컬호스트 주소(예: http://localhost:3000)에서 실행됩니다.

Kanban 생성​

개발 서버를 중지하고 Kanban 패키지를 설치하세요.

1단계. 패키지 설치​

평가판 Kanban 패키지를 다운로드하고, README 파일에 안내된 단계를 따르세요. 평가판 Kanban은 30일간만 사용 가능합니다.

2단계. 컴포넌트 생성​

Kanban과 Toolbar를 마운트하는 Angular 컴포넌트를 생성하세요. src/app/kanban/ 폴더를 만들고 그 안에 kanban.component.ts 파일을 추가하세요.

소스 파일 임포트​

kanban.component.ts 파일을 열고 Kanban 소스 파일을 임포트하세요. 임포트 경로는 패키지 버전에 따라 다릅니다:

  • 로컬 폴더에서 설치한 PRO 버전의 경우:
import { Kanban, Toolbar } from 'dhx-kanban-package';
  • 평가판 버전의 경우:
import { Kanban, Toolbar } from '@dhx/trial-kanban';

이 튜토리얼에서는 평가판 Kanban을 사용합니다.

컨테이너 설정 및 Kanban 초기화​

Toolbar와 함께 Kanban을 표시하려면 두 개의 컨테이너를 설정하고 생성자를 호출하세요. 아래 코드 스니펫은 컴포넌트 템플릿을 정의하고, 컨테이너를 참조하며, 인스턴스를 생성합니다:

kanban.component.ts
import { Kanban, Toolbar } from '@dhx/trial-kanban';
import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation} from '@angular/core';

@Component({
    encapsulation: ViewEncapsulation.None,
    selector: "kanban", // "app.component.ts" 파일에서 <kanban /> 형태로 사용하는 템플릿 이름
    styleUrls: ["./kanban.component.css"], // css 파일 포함
    template:  `<div class = "component_container">
                    <div #toolbar_container></div>
                    <div #kanban_container class = "widget"></div>
                </div>`
})

export class KanbanComponent implements OnInit, OnDestroy {
    // Toolbar 컨테이너 초기화
    @ViewChild("toolbar_container", { static: true }) toolbar_container!: ElementRef;
    // Kanban 컨테이너 초기화
    @ViewChild("kanban_container", { static: true }) kanban_container!: ElementRef;

    private _kanban!: Kanban;
    private _toolbar!: Toolbar;

    ngOnInit() {
        // Kanban 컴포넌트 초기화
        this._kanban = new Kanban(this.kanban_container.nativeElement, {});

        // Toolbar 컴포넌트 초기화
        this._toolbar = new Toolbar(this.toolbar_container.nativeElement, {
            api: this._kanban.api,
            // 기타 구성 속성 
        });
    }

    ngOnDestroy(): void {
        this._kanban.destructor(); // Kanban 파괴
        this._toolbar.destructor(); // Toolbar 파괴
    }
}

스타일 추가​

Kanban과 컨테이너에 스타일을 추가하세요. src/app/kanban/ 디렉토리에 kanban.component.css 파일을 생성하세요:

kanban.component.css
/* Kanban 스타일 임포트 */
@import "@dhx/trial-kanban/dist/kanban.css";

/* 초기 페이지 스타일 지정 */
html,
body{
    height: 100%;
    padding: 0;
    margin: 0;
}

/* Kanban 및 Toolbar 컨테이너 스타일 */
.component_container {
    height: 100%; 
    margin: 0 auto;
}

/* Kanban 컨테이너 스타일 */
.widget {
    height: calc(100% - 56px);
}

데이터 로딩​

Kanban에 데이터를 채우려면 데이터 세트를 제공하세요. src/app/kanban/ 디렉토리에 data.ts 파일을 생성하세요:

data.ts
export function getData() {
    const columns = [
        {
            label: "Backlog",
            id: "backlog"
        },
        {
            label: "In progress",
            id: "inprogress"
        },
        // ...
    ];

    const cards = [
        {
            id: 1,
            label: "Integration with Angular/React",
            priority: 1,
            color: "#65D3B3",
            start_date: new Date("01/07/2021"),
            users: [3, 2],
            column: "backlog",
            type: "feature",
        },
        {
            label: "Archive the cards/boards ",
            priority: 3,
            color: "#58C3FE",
            users: [4],
            progress: 1,
            column: "backlog",
            type: "feature",
        },
        // ...
    ];

    const rows = [
        {
            label: "Feature",
            id: "feature",
        },
        {
            label: "Task",
            id: "task",
        }
    ];

    return { columns, cards, rows };
}

kanban.component.ts 파일을 열고 데이터 세트를 임포트한 다음, ngOnInit() 내부의 Kanban 설정 객체에 데이터 속성을 전달하세요:

kanban.component.ts
import { Kanban, Toolbar } from '@dhx/trial-kanban';
import { getData } from "./data"; // 데이터 임포트
import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation} from '@angular/core';

@Component({
    encapsulation: ViewEncapsulation.None,
    selector: "kanban", 
    styleUrls: ["./kanban.component.css"],
    template:  `<div class = "component_container">
                    <div #toolbar_container></div>
                    <div #kanban_container class = "widget"></div>
                </div>`
})

export class KanbanComponent implements OnInit, OnDestroy {
    @ViewChild("toolbar_container", { static: true }) toolbar_container!: ElementRef;
    @ViewChild("kanban_container", { static: true }) kanban_container!: ElementRef;

    private _kanban!: Kanban;
    private _toolbar!: Toolbar;

    ngOnInit() {
        const { cards, columns, rows } = getData(); // 데이터 속성 초기화
        this._kanban = new Kanban(this.kanban_container.nativeElement, {
            columns, // 컬럼 데이터 적용
            cards, // 카드 데이터 적용
            rows, // 행 데이터 적용
            rowKey: "type",
            // 기타 구성 속성 
        });

        this._toolbar = new Toolbar(this.toolbar_container.nativeElement, {
            api: this._kanban.api,
            // 기타 구성 속성 
        });
    }

    ngOnDestroy(): void {
        this._kanban.destructor(); 
        this._toolbar.destructor();
    }
}

또는 ngOnInit() 내부에서 인스턴스 생성 후 setConfig() 또는 parse()를 사용하여 데이터를 로드할 수 있습니다:

kanban.component.ts
import { Kanban, Toolbar } from '@dhx/trial-kanban';
import { getData } from "./data"; // 데이터 임포트
import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation} from '@angular/core';

@Component({
    encapsulation: ViewEncapsulation.None,
    selector: "kanban", 
    styleUrls: ["./kanban.component.css"],
    template:  `<div class = "component_container">
                    <div #toolbar_container></div>
                    <div #kanban_container class = "widget"></div>
                </div>`
})

export class KanbanComponent implements OnInit, OnDestroy {
    @ViewChild("toolbar_container", { static: true }) toolbar_container!: ElementRef;
    @ViewChild("kanban_container", { static: true }) kanban_container!: ElementRef;

    private _kanban!: Kanban;
    private _toolbar!: Toolbar;

    ngOnInit() {
        const { cards, columns, rows } = getData(); // 데이터 속성 초기화
        this._kanban = new Kanban(this.kanban_container.nativeElement, {
            columns: [],
            cards: [],
            rows: [],
            rowKey: "type",
            // 기타 구성 속성 
        });

        this._toolbar = new Toolbar(this.toolbar_container.nativeElement, {
            api: this._kanban.api,
            // 기타 구성 속성 
        });

        // setConfig() 또는 parse() 메서드로 데이터 적용
        this._kanban.setConfig({ 
            columns, 
            cards, 
            rows 
        }); 
    }

    ngOnDestroy(): void {
        this._kanban.destructor(); 
        this._toolbar.destructor();
    }
}

이제 Kanban 컴포넌트를 사용할 준비가 되었습니다. 요소가 렌더링되면 데이터와 함께 Kanban이 초기화됩니다. 지원되는 전체 구성 속성 목록은 Kanban API 레퍼런스를 참고하세요.

이벤트 처리​

Kanban에서 사용자 동작이 발생하면 이벤트가 트리거됩니다. 이벤트를 수신하여 특정 동작에 반응할 수 있습니다. 전체 목록은 Kanban 이벤트 레퍼런스를 참고하세요.

kanban.component.ts 파일을 열고 ngOnInit() 메서드를 확장하세요:

kanban.component.ts
// ...
ngOnInit() {
    this._kanban = new Kanban(this.kanban_container.nativeElement, {});

    this._kanban.api.on("add-card", (obj) => {
        console.log(obj.columnId);
    });
}

ngOnDestroy(): void {
    this._kanban.destructor(); 
}

3단계. Kanban을 앱에 추가​

앱에 KanbanComponent를 등록하려면 src/app/app.component.ts 파일을 열고 기본 코드를 교체하세요:

app.component.ts
import { Component } from "@angular/core";

@Component({
    selector: "app-root",
    template: `<kanban/>`
})
export class AppComponent {
    name = "";
}

src/app/ 디렉토리에 app.module.ts 파일을 생성하고 KanbanComponent를 선언하세요:

app.module.ts
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";

import { AppComponent } from "./app.component";
import { KanbanComponent } from "./kanban/kanban.component";

@NgModule({
    declarations: [AppComponent, KanbanComponent],
    imports: [BrowserModule],
    bootstrap: [AppComponent]
})
export class AppModule {}

src/main.ts 파일을 열고 기존 코드를 교체하세요:

main.ts
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { AppModule } from "./app/app.module";
platformBrowserDynamic()
    .bootstrapModule(AppModule)
    .catch((err) => console.error(err));

앱을 실행하면 페이지에 데이터가 채워진 Kanban 보드가 표시됩니다.

Kanban with Angular

전체 프로젝트는 GitHub에서 확인할 수 있습니다.

Need more help?Contact Support