Page History

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

Inside Angular we have something called directives which basically wraps/fold an blob of html into one new html tag, soFor example, Servoy NGClient uses an AngularJS based web component textfield from the servoydefault package by letting Servoy generate a AngularJS directive (for resolving the custom HTML tag) like:

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

expands to something likewhich Angular resolves run-time to:

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

an A directive like "datafield" textfield 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 automatically takes care of the binding between model and displayview, for in the example above the ng-model parameter sync on the textfield binds the field value with value of the input element to the orderid in the model (scope).

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

1. Specification (.spec file) defines all properties and types (internally called beanInfo)
2. Template contain for example an Angular template (.html file) contains the html with directives like for example ng-model or "ng-click" handler to webcomponent logic
3. Logic, does Client side logic (.js file) 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