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을 표시하려면 두 개의 컨테이너를 설정하고 생성자를 호출하세요. 아래 코드 스니펫은 컴포넌트 템플릿을 정의하고, 컨테이너를 참조하며, 인스턴스를 생성합니다:
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 스타일 임포트 */
@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 파일을 생성하세요:
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 설정 객체에 데이터 속성을 전달하세요:
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()를 사용하여 데이터를 로드할 수 있습니다:
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() 메서드를 확장하세요:
// ...
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 파일을 열고 기본 코드를 교체하세요:
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `<kanban/>`
})
export class AppComponent {
name = "";
}
src/app/ 디렉토리에 app.module.ts 파일을 생성하고 KanbanComponent를 선언하세요:
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 파일을 열고 기존 코드를 교체하세요:
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { AppModule } from "./app/app.module";
platformBrowserDynamic()
.bootstrapModule(AppModule)
.catch((err) => console.error(err));
앱을 실행하면 페이지에 데이터가 채워진 Kanban 보드가 표시됩니다.
전체 프로젝트는 GitHub에서 확인할 수 있습니다.