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">    var 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. Here two methods are possible:

initializing from HTML markup - the directive is used without an argument, the application is initialized via HTML:

<div webix-ui type="space"> <!-- app html --> </div>

initializing from a JS configuration object - the directive is used with the app's config object as an argument, no additional markup is used. Config object is stored in the app's controller:

<div webix-ui="config" webix-ready="doSome(root)" style="width:450px; height:300px;">

Two patterns are equal in functionality yet differ in the way this functionality is implemented.

Layout with Tabbar and Multiview

<body>
  <div webix-ui type="space"> <!--layout rows with type "space" are created-->
    <div height="35">Header { {app} }</div> <!--Webix template is initialized -->
    <div view="cols" type="wide" margin="10"> <!--Webix layout cols are initialized-->
        <div width="200"> 
            <input type="text" placeholder="Type here" ng-model="app">
        </div>
        <div view="resizer"></div>
        <div view="tabview">
            <div header="Tab1">
                1. Some content here
            </div>
            <div header="Tab2">
                2. Other content here
            </div>
        </div>
    </div>
    <div height="35">Footer</div>
  </div>
</body>

Related sample: Webix-Angular:Layouts

The input and header template are bound together by ng-model directive.

You can check how these views are initialized in Webix: layout, resizer, tabview, template.

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 (the latter is defined by innerHTML).

<div style="width:750px;">
 <div webix-ui view="datatable" webix-data="records" autoheight="true" select="row">
   <div view="column" id="rating" sort="int" css="rating">Rating</div>
   <div view="column" id="year"   sort="int">Year</div>
   <div view="column" id="votes"  sort="int">Votes</div>
   <div view="column" id="title"  sort="string" fillspace="true">Title</div>  
 </div>
</div>

Related sample: Webix-Angular:Grid

Note that any HTML outside "webix-ui" block is parsed as standard markup while a div with webix-ui attribute constructs Webix app.

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.

<div style="width:500px; height:200px;">
  <div webix-ui view="chart" id="mychart" webix-data="lines" type="bar" value="#sales#" borderless="true"></div>
</div>

Related sample: Webix-Angular:Chart

Note that any HTML outside "webix-ui" block is parsed as standard markup while a div with webix-ui attribute starts Webix app.

Data loading issues are explained separately.

Rendering Arrays

Webix to Angular integration allows for rendering both arrays of components and arrays in component configuration with Angular ng-repeat directive.

Rendering an array of the same Webix components

Webix-ui directive can be combined with Angular ng-repeat to render an array of views

<div webix-ui>
    <div ng-repeat="chart in charts" view="chart">
</div>

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

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

Rendering arrays within component configuration

Arrays in component config are denoted by the stack property. Inside the array notation you can use ng-repeat to iterate through it and specify the information to display:

<config stack='series'>
    <config ng-repeat="serie in chart.series" value="#.template#"></config>
</config>

where series is a property of scope chart variable that contains an object with chart series config:

{ 
    data:chart_data, 
    series:[ 
        { template:"sales3", color:"#ff8" }, 
        { template:"sales", color:"#f8f" }
    ] 
}

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

Initializing from Config Object

Initialization via config object helps to get rid of markup and hence, markup-specific directives, and move the entire application code to Angular controller.

The only markup line you need is:

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

This method is closer to Webix initialization pattern. Config object is the 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.

Controller Code

var app = angular.module('webixApp', [ "webix" ]);
 
app.controller("webixTestController", function($scope){
    var header = { type:"header", template:"App header" };
    var left = { view:"list", id:"a1", select:true, data:["One", "Two", "Three"] };
    var 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. If you init from HTML markup, use the webix-event directive for these needs.

<body ng-controller="webixTestController">
    <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 the 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.