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

В этой статье описана интеграция Webix с фреймворком Angular JS версии 2 и ниже.

Исходники для интеграции Webix с AngularJS не входят в пакет библиотеки Webix. Их можно получить из репозитория на GitHub.

Структура приложения Webix-Angular

Чтобы использовать фреймворк Angular JS с компонентом Webix, необходимо:

подключить скрипты Angular и Webix в документ. Порядок важен: скрипт Angular JS должен идти первым
задать директиву ngApp в корневом элементе документа для запуска приложения. Рекомендуется использовать "webixApp" в качестве имени модуля
создать новый модуль, передав имя модуля из предыдущего шага и обязательный параметр "webix" для подключения к библиотеке Webix

<!DOCTYPE html> <!--setting directive-->
<html lang="en" ng-app="webixApp">
<head>
  <meta charset="utf-8">
  <title>Webix-Angular App</title>
  <script src="js/angular.min.js"></script>
  <script type="text/javascript" src="../../codebase/webix.js"></script>
  <link rel="stylesheet" type="text/css" href="../../codebase/webix.css">
 
  <script type="text/javascript">    const app = angular.module('webixApp', [ "webix" ]); // создаем новый модуль
    ... // логика приложения (контроллеры)
  </script>
</head>
<body>
  <!-- app's html -->
</body>
</html>

Поскольку логика приложения обычно бывает сложной, контроллеры рекомендуется выносить в отдельный файл:

<script type="text/javascript" src="controllers.js">

Инициализация компонентов Webix

В связке с Angular JS Webix предоставляет специальную директиву webix-ui для запуска приложения. Директива принимает объект конфигурации приложения в качестве аргумента, а весь код приложения размещается в контроллере Angular.

Единственная необходимая строка разметки:

<body ng-controller="webixAppController">
  <div webix-ui="config" webix-ready="doSome(root)"></div>
</body>

Этот подход близок к стандартному паттерну инициализации Webix. Объект Config - это JSON-объект, который вы передаёте в конструктор webix.ui() при работе с Webix без фреймворка;
Обработчики событий подключаются с помощью директивы webix-ready, которая вызывает функцию контроллера, принимающую корневой элемент config в качестве параметра. Описано далее

Код контроллера

const app = angular.module('webixApp', [ "webix" ]);
 
app.controller("webixAppController", function($scope){
  const header = { type:"header", template:"App header" };
  const left = { view:"list", id:"a1", select:true, data:["One", "Two", "Three"] };
  const right = { template:"Right area", id:"a2" };
 
  // объект конфигурации
  $scope.config = {
     isolate:true, rows:[ // две строки
        header,
        { cols:[ 
            left,  // компонент list
            { view:"resizer" }, // компонент resizer
            right // компонент template
        ]}
     ]
  };
});

Related sample: Webix-Angular:Initializing from Config

В примере используются list, template, layout, resizer line
Корневой view объекта конфигурации (здесь: лейаут из двух строк) должен иметь свойство isolate, чтобы избежать конфликтов ID, когда такие же ID существуют в другом объекте конфигурации на странице. Аналогичную функциональность предоставляет Webix IdSpace mixin.

Подключение событий с помощью директивы webix-ready

Директива webix-ready вызывает функцию контроллера с корневым элементом config в качестве аргумента и позволяет добавлять обработчики событий для всех компонентов в текущей конфигурации.

<body ng-controller="webixAppController">
  <div webix-ui="config" webix-ready="doSome(root)"></div>
</body>

Root - корневой view конфигурации приложения. Здесь root - это лейаут из двух строк.

Свойство isolate у Root означает, что ID дочерних view (header, list, template) не обязаны быть уникальными в пределах страницы (такие же ID могут быть в другом объекте конфигурации). Однако, при добавлении обработчиков событий, обращаться к компонентам нужно через их root.

Код контроллера

app.controller("webixAppController", function($scope){
    $scope.doSome = function(root){
    const list = root.$$("a1"); // обращаемся к list через root объект
    const template = root.$$("a2"); // обращаемся к template через root
 
    list.attachEvent("onAfterSelect", function(id){
        template.setHTML(this.getItem(id).value); 
    });
 
      list.select(list.getFirstId());
  }
});

Внутри функции, вызываемой директивой webix-ready, интегрированное приложение Webix-Angular следует стандартному паттерну обработки событий Webix.

Лейаут с Tabbar и Multiview

В этом примере используются следующие view: layout, resizer, tabview и template.

<body ng-controller="webixLayoutController" class="webix_full_screen">
  <div webix-ui="config" style="width:100%; height:100%;"></div>
</body>

Код контроллера

const app = angular.module('webixApp', ["webix"]);
 
app.controller("webixLayoutController", function ($scope) {
  // элементы UI
  const header = { 
      view: "template", id: "header", height: 35, 
        template: `Header #headertext#`, data: { headertext: "" } 
  };
  const main = {
    view: "layout", type: "wide", margin: 10, cols: [
      {
        rows: [
          { view: "text", id: "text", placeholder: "Type something here", width: 200 },
          {},
        ]
      },
      { view: "resizer" },
      {
        view: "tabview", cells: [
          { header: "Tab1", body: { template: "1. Some content here" } },
          { header: "Tab2", body: { template: "2. Other content here" } },
        ]
      }
    ]
  };
  const footer = { view: "template", template: "Footer", height: 35 };
 
  // конфигурация
  $scope.config = {
    id: "topview",
    type: "space",
    rows: [
      header,
      main,
      footer
    ]
  };
});

Related sample: Webix-Angular:Layouts

Компонент Datatable

Webix datatable - это сложный компонент для работы с большими объёмами данных. Таблица в примере содержит четыре столбца. Для нее установлена автонастройка высоты, которая будет зависеть от контента, а также возможность выбирать строки. У каждого столбца есть свой ID, метод сортировки и заголовок.

<body ng-controller="webixGridController">
  <div 
    webix-ui="config" 
    webix-data="records"  
    webix-watch="false"
    style="width:750px;">
  </div>
</body>

Код контроллера

const app = angular.module('webixApp', ["webix"]); 
 
app.controller("webixGridController", function ($scope) {
  $scope.records = [
    // конфигурация данных
  ];
 
  $scope.config = {
    view: "datatable",
    id: "grid",
    autoheight: true,
    select: "row",
    columns: [
      // конфигурация столбцов
    ],
  };
});

Related sample: Webix-Angular:Grid

Вопросы загрузки данных описаны в статье Контроллеры Angular и загрузка данных.

Компонент Chart

Webix chart - это компонент для визуализации данных. Для диаграммы из примера ниже установлен тип bar. Она отображает показатели продаж и не имеет рамок.

<body ng-controller="webixChartController">
  <div 
    webix-ui="config" 
    webix-data="lines"
    webix-watch="false"
    style="width:500px; height:200px;">
  </div>
</body>

Код контроллера

const app = angular.module('webixApp', ["webix"]);
 
app.controller("webixChartController", function ($scope) {
  $scope.lines = [
    // конфигурация данных
  ];
 
  $scope.config = {
    view: "chart",
    id: "mychart",
    type: "bar",
    value: "#sales#",
    borderless: true,
  };
});

Related sample: Webix-Angular:Chart

Вопросы загрузки данных описаны в статье Контроллеры Angular и загрузка данных.

Отрисовка массивов

Интеграция Webix с Angular поддерживает отрисовку массивов компонентов с помощью директивы Angular ng-repeat, например, массива одинаковых компонентов Webix:

<body ng-controller="webixChartController">
   <div
      ng-repeat="chart in charts"
      webix-ui="chart.config"
      webix-data="chart.data"
      webix-watch="false">
  </div>
</body>

где charts - это переменная области видимости, содержащая массив конфигураций компонентов:

$scope.charts = [
  { data:chart_data, config: chart },
  { data:chart_data, config: chart }
];

Related sample: Webix-Angular:Using ng-repeat

Отрисовка сложных лейаутов

Интеграция Webix-Angular позволяет создавать сложные приложения с различными взаимосвязанными компонентами Webix.

Related sample: Webix-Angular:Complex Initialization

Управление видимостью компонента

Обратите внимание: компоненты Webix нельзя скрывать и показывать с помощью директив Angular ngShow и ngHide - эти директивы работают только с обычными HTML-элементами.

Дополнительные материалы

Контроллеры Angular и загрузка данных

Наверх