Angular JS Integration

The Webix library provides integration with Angular JS framework.

The sources for integration of Webix with AngularJS are not included into the Webix library package. You can take 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 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:

<div webix-ui type="space"> <!-- app html --> </div>
<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.

Initializing from HTML markup

This method resembles Webix HTML Initialization technique but has its own peculiarities:

  • Webix application lies in a div block with webix-ui directive:
    • view attribute of such block specifies Webix component you want to init;
    • if you don't specify the view attribute - a layout row will be created;
  • all div blocks within "webix-ui block" are Webix views(components):
    • view attribute of a div specifies Webix component you want to init;
    • a div block without the view attribute inits Webix template;
    • other attributes of div blocks are component properties;
  • As with standard Angular JS, you can easily insert Angular directives into tags including inputs and buttons (like in standard HTML).

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 as well as arrays in component configuration with Angulat ng-repeat directive.

Rendering an array of the same Webix components

Webix-ui directive can be combined with Angular ng-repeat to render an arry 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 stack property. Inside 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 inter-related Webix components in it.

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

Further Reading

Initializing from Config Object

Initialization via config object helps 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 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 an 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 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 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.

Controller Code

app.controller("webixTestController", function($scope){
    $scope.doSome = function(root){
    var list = root.$$("a1"); //referring to list via root object
    var 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.

Back to top