WebComponents

Servoy NGClient uses a library called AngularJS, which provides all the means for building webcomponents.

Inside AngularJS we have something called directives which basically wraps/fold an blob of html into one new html tag, so:

<servoydefault-textfield dataProviderID="model.orderid" />

expands to something like:

<div class="xyz"><input type="text" ng-model="model.orderid"></div>

A directive like "datafield" is the basic building block for a webcomponent, see "Create Components" section at: http://angularjs.org (especially see the component.js tab there)

The component name must follow the angular naming restrictions imposed by angular directives. When using a directive in the html it resolves to the directive name by converting from snake-case to camelCase ,for example when defining a directive with name 'myDir' one must use it in ht html as  'my-dir'   see  'Matching Directives' section of https://docs.angularjs.org/guide/directive.

Inside each webcomponent Angular arranges for binding between model and display, for example the ng-model parameter sync the field value with the model (scope).

Every webcomponent consists out of at least 3 parts/files:

1. Specification defines all properties and types (internally called beanInfo)
2. Angular template contains the html with directives like for example ng-model or "ng-click" handler to webcomponent logic
3. Logic part does the adding of directive, and likely contains controller javascirpt to-do for example remote calls and expose api functions
4. optionally icon to be used in Servoy developer palette
5. optionally resources like css/images used by your components