Old Angular

Here is described the integration with Angular JS framework (lower than v.2).

The sources for integration of Webix with AngularJS are not included into the Webix library package. You can get them from the GitHub repository

Webix-Angular App Structure

To use Angular JS framework for Webix component you should:

include Angular and Webix scripts into the document. Note that order does matter here - Angular JS script must come first
set ngApp directive to the document root to bootstrap an application. For convenience means, it's recommended to use "webixApp" as module name
create a new module passing module name from the previous step and "webix" required parameter to connect it to the Webix library

<!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" ]); //creating module
    ..//app's js code (controllers)
  </script>
</head>
<body>
    <!-- app's html -->
</body>
</html>

However, since app logic is typically complex, it's a good practice to store controllers separately:

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

Initializing Webix Components

Bound to Angular JS, Webix offers a special webix-ui directive that bootstraps an application. The directive is used with the app's config object as an argument while the entire application code is placed in the Angular controller.

The only markup line you need is:

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

This method is close to Webix initialization pattern. Config object is JSON object you would pass into webix.ui() constructor if you were working with Webix alone;
Event handlers are attached with the help of webix-ready directive that executes a controller function taking config root as parameter. Described later

The controller code is:

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" };
 
    //config object
    $scope.config = {
        isolate:true, rows:[ //two rows
            header,
            { cols:[
                left,  //list
                { view:"resizer" }, //resizer line
                right //template
            ]}
        ]
    };
});

Related sample: Webix-Angular:Initializing from Config

Components used in the sample are list, template, layout, resizer line
Top parent view of the config object (here: two-row layout) should have the isolate property to avoid ID mess in a situation when there're same IDs in another config object on the page. Similar functionality is offered by Webix IdSpace mixin.

Attaching Events with webix-ready Directive

Webix-ready directive executes a controller function with a config root as an argument and makes it possible to attach event handlers for all components in current configuration.

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

Root is a top parent view of your application config. Here root is a two-row layout.

Root has an isolate property, which means that the IDs of its child views (header, list, template) can be not unique within the page (there can be same IDs in another config object). But, when attaching event handlers, you should refer to components via their root.

The controller code is:

app.controller("webixAppController", function($scope){
    $scope.doSome = function(root){
        const list = root.$$("a1"); //referring to list via root object
        const template = root.$$("a2"); //referring to template via root object
 
        list.attachEvent("onAfterSelect", function(id){
            template.setHTML(this.getItem(id).value);
        });
 
        list.select(list.getFirstId());
    }
});

Inside the function invoked by webix-ready directive, Webix-Angular integrated app complies to standard Webix event handling pattern.

Layout with Tabbar and Multiview

In this example the layout, resizer, tabview, and template views are used.

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

The controller code is:

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

Datatable Component

Webix datatable is a complex component for working with large amounts of data. The table below features four columns, row selection and auto height. Each column has its own ID, sorting method and header.

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

The controller code is:

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

Data loading issues are explained separately.

Chart Component

Webix chart is a handy data visualization tool. The chart below is of a bar type, shows sale rates and comes without borders.

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

The controller code is:

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

Data loading issues are explained separately.

Rendering Arrays

Webix to Angular integration allows rendering arrays of components with Angular ng-repeat directive, e.g. an array of the same Webix components:

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

where charts is a scope variable that includes an array of component configurations:

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

Related sample: Webix-Angular:Using ng-repeat

Rendering Complex Layouts

Webix-Angular integration allows for complex application design with different interrelated Webix components in it.

For more details, study the dedicated sample: Webix-Angular:Complex Initialization

Changing View Visibility

Note that Webix views can't be hidden and shown back with Angular ngShow and ngHide directives that can still be used to manipulate visibility of pure HTML elements.

Old Angular

Webix-Angular App Structure

Initializing Webix Components

Attaching Events with webix-ready Directive

Layout with Tabbar and Multiview

Datatable Component

Chart Component

Rendering Arrays

Rendering Complex Layouts

Changing View Visibility

Further Reading