Page History

Servoy NGClient uses a client side MVC 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, 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:

<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>

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)

...

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. Angular template (.html file) contains the html with directives like for example ng-model or "ng-click" handler to webcomponent logic
3. LogicClient 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 

...