Simple angular expressions, custom angular talking to servoy

Forum to discuss the new web client version of Servoy.

Simple angular expressions, custom angular talking to servoy

Postby jeremiahb » Fri Nov 13, 2015 7:34 am

Hi,

I am experienced with Angular; new to Servoy.

I have a pretty UI layout built using Angular and Bootstrap that I need to replicate (or get close to) in Servoy. The main part of the app will be Servoy, but the menus and page scaffolding must look like Google Inbox with some slick CSS and Javascript, so I'm using HTMLview components for these parts.

1. Really simple Angular problem:
How can I get Angular to see the Angular expressions inside custom HTMLview components?

If I make an HTMLview component and give it a string of "<p>{{3 + 4}}</p>" I am hoping that it will render as a paragraph with "7" inside it, but Servoy renders a paragraph with "{{3 + 4}}" in it. It never gets parsed by Angular, even though Angular is present and working on the page.

Is Servoy escaping out my {{}}'s and then unescaping them and rendering them in the browser so then angular never sees them?

2. More complex Angular problem
How do I load controllers for my own HTML? I have angular controllers, can I include them as a media file so they get deployed with the solution?

3. Talking to Servoy from Javascript / Angular
How is this done? Eg if I have a beautiful custom made search box and the user enters text and it fires a javascript function sending the text as a parameter, how do I send this onwards to Servoy?
A colleague (with experience in Webclient and Smart client) says this is done in WebClient with the WebClientUtils plugin, but as NGClient uses Angular, is there another way this is done?


Thanks for your help,
Jeremiah Blanch
TSM The Service Manager
jeremiahb
 
Posts: 6
Joined: Fri Nov 13, 2015 7:15 am

Re: Simple angular expressions, custom angular talking to se

Postby jcompagner » Fri Nov 13, 2015 6:41 pm

1>

the html area component i think is just showing that html, its not a template for angular, so i don't think it will be parsed
I think you need to make a custom component for that that you get your templates from the server (through dataproviders or something) and $parse() it

2>
so the html above (of point 1) also have controllers and so on in them?
I think it would be better t make components out of them, or make your own component (or service) package where you just also add all your controller js code.
(the js files of a component or services are auto included)

3>
talking to the server is going through components,
components have models which are 3 way binded (so your component view, the angular model and the serverside model). So those are auto pushed
Event communication is done through handlers so you can a function that then calls a server side servoy method.

The WebClientUtils plugin is just for WebClient not ngclient. And we have components/services with model/handlers for that in the NGClient

I think you should really look into making a few nice components (or services) from your existing html/angular code so that you can communicate through that to the server.
Johan Compagner
Servoy
User avatar
jcompagner
 
Posts: 8833
Joined: Tue May 27, 2003 7:26 pm
Location: The Internet

Re: Simple angular expressions, custom angular talking to se

Postby jeremiahb » Mon Nov 16, 2015 5:11 am

Thanks Johan.

The three-way binding is still confusing to me. I understand Angular two-way binding, so if Servoy binding to the back-end works like that, awesome. But how to do it?

I've made my first component, called jbfirst, by right-clicking "NG Components" under Resources. It makes the basic hello world component, with a parameter called "yourName". I put the component onto my form. In its properties, under Component, there is a parameter yourName, which corresponds to the parameter defined under "model" in the .spec file.

How do I point this value to, for example, a datasource or a form variable, like classic Servoy?

Thanks,

Jeremiah
TSM The Service Manager
jeremiahb
 
Posts: 6
Joined: Fri Nov 13, 2015 7:15 am

Re: Simple angular expressions, custom angular talking to se

Postby jeremiahb » Mon Nov 16, 2015 7:28 am

I think I worked out this second part - I set the variable type to be "dataprovider" inside the .spec file.
jeremiahb
 
Posts: 6
Joined: Fri Nov 13, 2015 7:15 am

Re: Simple angular expressions, custom angular talking to se

Postby jcompagner » Mon Nov 16, 2015 1:25 pm

yes "dataproviders" are binded by us (on the server side) to a table.column


and you can then from the client data sync that back see:

https://wiki.servoy.com/display/DOCS/Specification

(data synchronization)

So you just have to tell us how (like shallow or deep then we try to do it) or do it your self (allow) and calling the servoyApi.apply()
Johan Compagner
Servoy
User avatar
jcompagner
 
Posts: 8833
Joined: Tue May 27, 2003 7:26 pm
Location: The Internet


Return to Servoy NGClient

Who is online

Users browsing this forum: No registered users and 7 guests

cron