Page History

with angularjs webcomponents should be easy to make

angular supports something called directives which basically wraps/fold an blob of html into one new html tag, so:

...

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

For 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" valueng-model="{{recordmodel.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)

So every 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 automatically takes care of the binding between model and view, in the example above the ng-model parameter on the textfield binds the value of the input element to the orderid in the model.

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 webcomponent controller javascript file (does html with directives like for example ng-model or "ng-click" handler to webcomponent logic
3. Client side logic (.js file) part does the adding of directive, and likely contains controller javascirpt to-do for example remote calls )
4. the webcomponent html template (might for example contain the "ng-click" handler to webcomponent javascript controller)
5. the webcomponent spec (internally called beanInfo, defines all properties and types, see child page)

...

1. and expose api functions
2. optionally icon to be used in Servoy developer palette
3. optionally resources like css/images used by your components