{"id":22750255,"url":"https://github.com/webix-hub/webix-angular","last_synced_at":"2025-04-14T12:53:17.692Z","repository":{"id":65379304,"uuid":"85984135","full_name":"webix-hub/webix-angular","owner":"webix-hub","description":"Using Webix with Angular","archived":false,"fork":false,"pushed_at":"2020-06-08T01:51:17.000Z","size":13,"stargazers_count":2,"open_issues_count":0,"forks_count":4,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-03-28T02:03:15.200Z","etag":null,"topics":["jquery","webix","webix-integration"],"latest_commit_sha":null,"homepage":"http://webix.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/webix-hub.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-03-23T18:28:44.000Z","updated_at":"2017-04-28T02:35:34.000Z","dependencies_parsed_at":"2023-01-20T08:45:48.572Z","dependency_job_id":null,"html_url":"https://github.com/webix-hub/webix-angular","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webix-hub%2Fwebix-angular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webix-hub%2Fwebix-angular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webix-hub%2Fwebix-angular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webix-hub%2Fwebix-angular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webix-hub","download_url":"https://codeload.github.com/webix-hub/webix-angular/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248606859,"owners_count":21132428,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["jquery","webix","webix-integration"],"created_at":"2024-12-11T04:13:19.932Z","updated_at":"2025-04-14T12:53:17.666Z","avatar_url":"https://github.com/webix-hub.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Angular JS adapter for Webix UI\n==========================\n\n[![npm version](https://badge.fury.io/js/webix-angular.svg)](https://badge.fury.io/js/webix-angular)\n\nBefore Webix 4.3 this module was part of webix.js\n\nSee the detailed documentation on [integration of Webix with Angular JS](http://docs.webix.com/desktop__angular.html).\n\nIf you are looking for the demo for **Angular 2 and above**, check the [related repository](https://github.com/webix-hub/angular2-demo).\n\nWebix-Angular App Structure\n---------------------------\n\nTo use **Angular JS framework** for \u003ca href=\"http://webix.com/widgets/\" title=\"javascript widget\"\u003eWebix component\u003c/a\u003e you should:\n\n- include **Angular** and **Webix** scripts into the document. Note that order does matter here - Angular JS script must come first;\n- set **ngApp directive** to the document root to bootstrap an application. For convenience means, it's recommended to use **\"webixApp\"** as **module name**.  \n- **create a new module** passing module name from the previous step and *\"webix\"* required parameter to connect it to Webix library.\n\n~~~html\n\u003c!doctype html\u003e \u003c!--setting directive--\u003e\n\u003chtml lang=\"en\" ng-app=\"webixApp\"\u003e \n\u003chead\u003e\n  \u003cmeta charset=\"utf-8\"\u003e\n  \u003ctitle\u003eWebix-Angular App\u003c/title\u003e\n  \u003cscript src=\"js/angular.min.js\"\u003e\u003c/script\u003e\n  \u003cscript type=\"text/javascript\" src=\"../../codebase/webix.js\"\u003e\u003c/script\u003e\n  \u003clink rel=\"stylesheet\" type=\"text/css\" href=\"../../codebase/webix.css\"\u003e\n  \n  \u003cscript type=\"text/javascript\"\u003e\n  \tvar app = angular.module('webixApp', [ \"webix\" ]); //creating module\n  \t..//app's js code (controllers)\n  \u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\t\u003c!-- app's html --\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n~~~\n\nHowever, since app logic is typically complex, it's a good practice to store controllers separately:\n\n~~~html\n\u003cscript type=\"text/javascript\" src=\"controllers.js\"\u003e\n~~~\n\nInitializing Webix Components\n-----------------------\n\nBound to Angular JS, Webix offers a special **webix-ui** directive that bootstraps an application. Here two methods are possible:\n\n- [initializing from HTML markup](#html) - the directive is used without an argument, the application is initialized via HTML:\n\n~~~html\n\u003cdiv webix-ui type=\"space\"\u003e \u003c!-- app html --\u003e \u003c/div\u003e\n~~~\n\n- [initializing from a JS configuration object](#config) - 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:\n\n~~~html\n\u003cdiv webix-ui=\"config\" webix-ready=\"doSome(root)\" style=\"width:450px; height:300px;\"\u003e\n~~~\n\nTwo patterns are equal in functionality yet differ in the way this functionality is implemented. \n\nInitializing from HTML markup\n--------------------\n\nThis method resembles Webix [HTML Initialization technique](http://docs.webix.com/desktop__html_markup_init.html) but has its own peculiarities:\n\n- Webix application lies in a div block with **webix-ui** directive:\n\t- **view** attribute of such block specifies Webix component you want to init;\n\t- if you don't specify the view attribute - a layout row will be created;\n- all div blocks within \"webix-ui block\" are Webix views (components):\n\t- **view** attribute of a div specifies Webix component you want to init;\n\t- a div block without the view attribute inits Webix template;\n\t- other attributes of div blocks are component **properties**;\n- As with standard Angular JS, you can easily insert Angular directives into tags including inputs and buttons (like in standard HTML).\n\n**Layout with Tabbar and Multiview**\n\n~~~html\n\u003cbody\u003e\n  \u003cdiv webix-ui type=\"space\"\u003e \u003c!--layout rows with type \"space\" are created--\u003e\n\t\u003cdiv height=\"35\"\u003eHeader { {app} }\u003c/div\u003e \u003c!--Webix template is initialized --\u003e\n\t\u003cdiv view=\"cols\" type=\"wide\" margin=\"10\"\u003e \u003c!--Webix layout cols are initialized--\u003e\n\t\t\u003cdiv width=\"200\"\u003e \n\t\t\t\u003cinput type=\"text\" placeholder=\"Type here\" ng-model=\"app\"\u003e\n\t\t\u003c/div\u003e\n\t\t\u003cdiv view=\"resizer\"\u003e\u003c/div\u003e\n\t\t\u003cdiv view=\"tabview\"\u003e\n\t\t\t\u003cdiv header=\"Tab1\"\u003e\n\t\t\t\t1. Some content here\n\t\t\t\u003c/div\u003e\n\t\t\t\u003cdiv header=\"Tab2\"\u003e\n\t\t\t\t2. Other content here\n\t\t\t\u003c/div\u003e\n\t\t\u003c/div\u003e\n\t\u003c/div\u003e\n\t\u003cdiv height=\"35\"\u003eFooter\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/body\u003e\n~~~\n\n**Related sample:** [Webix-Angular:Layouts](https://webix-hub.github.io/webix-angular/samples/01_layout.html)\n\nThe input and header template are bound together by **ng-model** directive. \n\nRead more about initialization from HTML markup in the [Webix documentation](http://docs.webix.com/desktop__angular.html#initializingfromfromhtmlmarkup).\n\nInitializing from Config Object \n--------------------\n\nInitialization via config object helps **get rid of markup** and hence, markup-specific directives, and move the entire application code to **Angular controller**.\n\nThe only markup line you need is: \n\n~~~html\n\u003cbody ng-controller=\"webixTestController\"\u003e\n\t\u003cdiv webix-ui=\"config\" webix-ready=\"doSome(root)\"\u003e\u003c/div\u003e\n\u003c/body\u003e\n~~~\n\n- 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;\n- Event handlers are attached with the help of **webix-ready** directive that executes a controller function taking **config root** as parameter.   \n\nThe controller code is:\n\n~~~js\nvar app = angular.module('webixApp', [ \"webix\" ]);\n\napp.controller(\"webixTestController\", function($scope){\n    var header = { type:\"header\", template:\"App header\" };\n\tvar left = { view:\"list\", id:\"a1\", select:true, data:[\"One\", \"Two\", \"Three\"] };\n\tvar right = { template:\"Right area\", id:\"a2\" };\n\t\n    //config object\n \t$scope.config = {\n   \t \tisolate:true, rows:[ //two rows\n     \t\theader,\n     \t\t{ cols:[ \n     \t\t\tleft,  //list\n        \t\t{ view:\"resizer\" }, //resizer line\n        \t\tright //template\n     \t\t]}\n    \t]\n\t};\n};\n~~~\n\n**Related sample:** [Webix-Angular:Initializing from Config](https://webix-hub.github.io/webix-angular/samples/06_controller.html)\n\n**Attaching Events with webix-ready Directive**\n\n**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, \nuse [webix-event](http://docs.webix.com/desktop__angular_events.html) directive for these needs.\n\n~~~html\n\u003cbody ng-controller=\"webixTestController\"\u003e\n\t\u003cdiv webix-ui=\"config\" webix-ready=\"doSome(root)\"\u003e\u003c/div\u003e\n\u003c/body\u003e\n~~~\n\n**Root** is a **top parent view** of your application config. Here root is a *two-row layout*. \n\nRoot 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, \nyou should refer to components via their root. \n\nThe controller code is:\n\n~~~js\napp.controller(\"webixTestController\", function($scope){\n    $scope.doSome = function(root){\n    var list = root.$$(\"a1\"); //referring to list via root object\n    var template = root.$$(\"a2\"); //referring to template via root object\n    \n    list.attachEvent(\"onAfterSelect\", function(id){\n      template.setHTML(this.getItem(id).value); \n    });\n\n    list.select(list.getFirstId());\n  };\n};\n~~~\n\nInside the function invoked by **webix-ready** directive, Webix-Angular integrated app complies to standard Webix [event handling pattern](http://docs.webix.com/desktop__event_handling.html).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebix-hub%2Fwebix-angular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebix-hub%2Fwebix-angular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebix-hub%2Fwebix-angular/lists"}