Перейти к основному содержимому

Интеграция с Angular

совет

Прежде чем читать эту документацию, ознакомьтесь с базовыми концепциями и шаблонами Angular. Для обновления знаний обратитесь к документации Angular.

DHTMLX To Do List совместим с Angular. Приведённые ниже примеры показывают, как использовать их вместе. Полный проект доступен в примере на GitHub.

Создание проекта​

Создайте новый проект Angular и установите зависимости.

информация

Перед созданием нового проекта установите Angular CLI и Node.js.

Создайте новый проект my-angular-todo-app с помощью Angular CLI. Выполните следующую команду:

ng new my-angular-todo-app
заметка

Чтобы следовать этому руководству, отключите Server-Side Rendering (SSR) и Static Site Generation (SSG/Prerendering) при создании нового Angular-приложения.

Команда устанавливает все необходимые инструменты.

Установка зависимостей​

Перейдите в директорию созданного приложения:

cd my-angular-todo-app

Установите зависимости и запустите сервер разработки с помощью менеджера пакетов yarn:

yarn
yarn start

Приложение запускается по адресу localhost (например, http://localhost:3000).

Создание To Do List​

Остановите приложение и установите пакет To Do List.

Шаг 1. Установка пакета​

Загрузите пробный пакет To Do List и следуйте инструкциям в файле README. Пробная версия доступна только 30 дней.

Шаг 2. Создание компонента​

Создайте Angular-компонент для добавления To Do List с Toolbar в приложение. В директории src/app/ создайте папку todo и внутри неё файл todo.component.ts.

Импорт исходных файлов​

Откройте todo.component.ts и импортируйте исходные файлы To Do List. Выберите один из двух путей импорта:

  • PRO-версия, установленная из локальной папки — импорт из dhx-todolist-package
  • пробная версия — импорт из @dhx/trial-todolist

Следующий фрагмент импортирует из PRO-пакета:

todo.components.ts
import { ToDo, Toolbar } from 'dhx-todolist-package';

Следующий фрагмент импортирует из пробного пакета:

todo.components.ts
import { ToDo, Toolbar } from '@dhx/trial-todolist';

В этом руководстве используется пробная версия.

Настройка контейнеров и инициализация To Do List с Toolbar​

Чтобы отобразить To Do List с Toolbar на странице, задайте контейнеры для обоих компонентов и инициализируйте их с помощью конструкторов. Пример ниже определяет шаблон, ссылки на контейнеры и инициализирует компоненты внутри ngOnInit():

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

@Component({
    encapsulation: ViewEncapsulation.None,
    selector: "todo", // имя шаблона, используемое в "app.component.ts" как <todo />
    styleUrls: ["./todo.component.css"], // подключение css-файла

    template:  `<main class = "component_container">
                    <div #toolbar_container></div>
                    <div #todo_container class = "widget"></div>
                </main>`
})

export class ToDoComponent implements OnInit, OnDestroy {
    // инициализация контейнера для Toolbar
    @ViewChild("toolbar_container", { static: true }) toolbar_container!: ElementRef;
    // инициализация контейнера для To Do List 
    @ViewChild("todo_container", { static: true }) todo_container!: ElementRef;
    
    private _todo!: ToDo;
    private _toolbar!: Toolbar;

    ngOnInit() {
        // инициализация компонента To Do List
        this._todo = new ToDo(this.todo_container.nativeElement, {});
        
        // инициализация компонента Toolbar
        this._toolbar = new Toolbar(this.toolbar_container.nativeElement, {
            api: this._todo.api,
            // другие свойства конфигурации 
        });
    }

    ngOnDestroy(): void {
        this._todo.destructor(); // уничтожение To Do List
        this._toolbar.destructor(); // уничтожение Toolbar
    }
}

Добавление стилей​

Импортируйте CSS-файл, чтобы To Do List отображался корректно. Создайте файл todo.component.css в директории src/app/todo/ и добавьте стили для To Do List и его контейнера. Фрагмент ниже импортирует стили To Do List и задаёт размеры макета:

todo.component.css
/* импорт стилей To Do List */
@import "@dhx/trial-todolist/dist/todo.css";

/* стили для начальной страницы */
html,
body{
    height: 100%;
    padding: 0;
    margin: 0;
    background-color: #f7f7f7;
}

/* стили для контейнера To Do List и Toolbar */
.component_container {
    height: 100%; 
    max-width: 800px; 
    margin: 0 auto;
}

/* стили для контейнера To Do List */
.widget {
    height: calc(100% - 56px);
}

Загрузка данных​

Создайте файл data.ts в директории src/app/todo/ и добавьте в него данные. Следующий пример экспортирует функцию getData(), которая возвращает задачи, пользователей и проекты:

data.ts
export function getData() {
    const tasks = [
        {
            id: "temp://1652991560212",
            project: "introduction",
            text: "Greetings, everyone! \u{1F44B} \nI'm DHTMLX To Do List.",
            priority: 1
        },
        {
            id: "1652374122964",
            project: "introduction",
            text: "You can assign task performers and due dates using the menu.",
            assigned: ["user_4", "user_1", "user_2", "user_3"],
            due_date: "2033-03-08T21:00:00.000Z",
            priority: 2
        },
        // ...
    ];
    const users = [
        {
            id: "user_1",
            label: "Don Smith",
            avatar:
                "https://snippet.dhtmlx.com/codebase/data/common/img/02/avatar_61.jpg"
        },
        // ...
    ];
    const projects = [
        {
            id: "introduction",
            label: "Introduction to DHTMLX To Do List"
        },
        {
            id: "widgets",
            label: "Our widgets"
        }
    ];
    return { tasks, users, projects };
}

Откройте todo.component.ts, импортируйте файл с данными и передайте свойства данных в объект конфигурации To Do List внутри метода ngOnInit(). Фрагмент ниже применяет данные пользователей, задач и проектов при инициализации:

todo.component.ts
import { ToDo, Toolbar } from '@dhx/trial-todolist';
import { getData } from "./data"; // импорт данных
import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation} from '@angular/core';

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

export class ToDoComponent implements OnInit, OnDestroy {
    @ViewChild("toolbar_container", { static: true }) toolbar_container!: ElementRef;
    @ViewChild("todo_container", { static: true }) todo_container!: ElementRef;
    
    private _todo!: ToDo;
    private _toolbar!: Toolbar;

    ngOnInit() {
        const { users, tasks, projects } = getData(); // инициализация свойств данных
        this._todo = new ToDo(this.todo_container.nativeElement, {
            users,
            tasks,
            projects,
            // другие свойства конфигурации
        });

        this._toolbar = new Toolbar(this.toolbar_container.nativeElement, {
            api: this._todo.api,
            // другие свойства конфигурации 
        });
    }

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

Вы также можете использовать метод parse() внутри ngOnInit() для загрузки данных в To Do List. Пример ниже загружает данные с помощью parse() после инициализации:

todo.component.ts
import { ToDo, Toolbar } from '@dhx/trial-todolist';
import { getData } from "./data"; // импорт данных
import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation} from '@angular/core';

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

export class ToDoComponent implements OnInit, OnDestroy {
    @ViewChild("toolbar_container", { static: true }) toolbar_container!: ElementRef;
    @ViewChild("todo_container", { static: true }) todo_container!: ElementRef;
    
    private _todo!: ToDo;
    private _toolbar!: Toolbar;

    ngOnInit() {
        const { users, tasks, projects } = getData(); // инициализация свойств данных
        this._todo = new ToDo(this.todo_container.nativeElement, {});

        this._toolbar = new Toolbar(this.toolbar_container.nativeElement, {
            api: this._todo.api,
            // другие свойства конфигурации 
        });

        // применение данных через метод parse()
        this._todo.parse({ 
            users, 
            tasks, 
            projects 
        }); 
    }

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

Каждый вызов parse(data) заменяет текущий набор данных.

Теперь компонент отображает заполненный To Do List. Другие доступные свойства описаны в обзоре конфигурации.

Обработка событий​

Подпишитесь на события, чтобы реагировать на действия пользователя. Смотрите полный список событий.

Откройте todo.component.ts и дополните метод ngOnInit(). Фрагмент ниже прикрепляет обработчик к событию add-task:

todo.component.ts
// ...
ngOnInit() {
    this._todo = new ToDo(this.todo_container.nativeElement, {});

    this._todo.events.on("add-task", (obj) => {
        console.log("A new task is added", obj);
    });
}

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

Шаг 3. Добавление To Do List в приложение​

Чтобы добавить ToDoComponent в приложение, откройте src/app/app.component.ts и замените код по умолчанию следующим фрагментом:

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

@Component({
    selector: "app-root",
    template: `<todo/>` // шаблон, созданный в "todo.component.ts"
})
export class AppComponent {
    name = "";
}

Создайте файл app.module.ts в директории src/app/ и зарегистрируйте ToDoComponent. Пример ниже объявляет компоненты и запускает приложение:

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

import { AppComponent } from "./app.component";
import { ToDoComponent } from "./todo/todo.component";

@NgModule({
    declarations: [AppComponent, ToDoComponent],
    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));

Запустите приложение — To Do List отобразится с тестовыми данными:

Инициализация To Do List

Полный проект доступен на GitHub.

Need more help?Contact Support