В этой статье описана интеграция Webix с Angular JS версии 2 и ниже.
Ресурсы для интеграции Webix и Angular не входят в стандартный пакет библиотеки Webix. Вы можете найти их в соответствующем GitHub репозитории.
Для интеграции Angular JS с 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">Для работы с Angular, у Webix предусмотрена специальная директива webix-ui, которая запускает приложение. Директива используется с объектом конфигурации в качестве параметра, а код всего приложения будет находиться в контроллере Angular.
Вам нужно указать только пару строчек:
<body ng-controller="webixAppController">
<div webix-ui="config" webix-ready="doSome(root)"></div>
</body>
Код контроллера
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
Директива webix-ready вызывает функцию контроллера с параметром config root. Она позволяет устанавливать обработчики событий для всех компонентов в текущей конфигурации.
<body ng-controller="webixAppController">
<div webix-ui="config" webix-ready="doSome(root)"></div>
</body>
Root - это верхний родительский компонент в конфигурации вашего приложения. Здесь это layout с двумя рядами.
У корневого (root) компонента есть свойство isolate, которое позволяет задавать неуникальные 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 приложение подчиняется общим правилам работы с событиями.
В примере ниже используются следующие компоненты: 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) {
//elements of 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 };
//configuration
$scope.config = {
id: "topview",
type: "space",
rows: [
header,
main,
footer
]
};
});
Related sample: Webix-Angular:Layouts
Webix datatable — это комплексный виджет для работы с большими наборами данных. Таблица из примера ниже состоит из 4 столбцов. Для нее установлена автонастройка высоты, которая будет зависеть от контента, а также возможность выбирать ряды. У каждого столбца есть уникальный 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 = [
// records configuration
];
$scope.config = {
view: "datatable",
id: "grid",
autoheight: true,
select: "row",
columns: [
// columns configuration
],
};
});
Related sample: Webix-Angular:Grid
О загрузке данных читайте в этой статье.
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 = [
// lines configuration
];
$scope.config = {
view: "chart",
id: "mychart",
type: "bar",
value: "#sales#",
borderless: true,
};
});
Related sample: Webix-Angular:Chart
О загрузке данных читайте в этой статье.
При интеграции 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>
где chart — это переменная из области видимости, которая включает массив конфигураций компонентов:
$scope.charts = [
{ data:chart_data, config: chart },
{ data:chart_data, config: chart }
];
Related sample: Webix-Angular:Using ng-repeat
Интеграция Webix-Angular позволяет создавать сложные приложения с использованием связанных между собой Webix компонентов.
Детали можно узнать в этом примере: Webix-Angular:Complex Initialization
В отличие от обычных HTML элементов, вы не можете прятать и показывать компоненты Webix с помощью соответствующих директив ngShow и ngHide.