UI Pages with AngularJS

[grosch]

I've got a UI page that uses AngularJS that's working great from the client side of things.   Now I'm ready to press the OK gutton (via the g:ui_form tag) which will run the processing script.   Usually from there I can just access variables that were defined in the client script, but with AngularJS there's not really a variable.

Is there a way to get at the data from the angular controller in the processing script so I can actually, you know, process it?  

[German Alvarez2]

Hi,

I'm quite interested in this thread... Nowadays I'm starting with angular, so, it would be fantastic to clearly understand what can we do with it.

First of all, I understand Angular in servicenow as a way to represent data instead of jelly, as an example: we need to retrieve and calculate data from different sources and represent the results. If the results structure is matrix, it is quite difficult to represent it using jelly, due to how to iterate with jelly (foreach into foreach), how to render it as a table (same problem) and how to react to the user interaction at the results page.

    - I've seen many people relying in temporal tables in order to make easier to deal with this problems.

With MVC paradigm at AJs: encapsulation, recycling and responsiveness I think we will go away from Jelly as much as we can.

As far as I understand, Angular takes sense clearly in client side, but not really in server side Why do you need angular in server, if you have js and glide Things?

  -> this is what really makes me thing I'm in a mistake with that idea!

I'm also wondering right now, if there is a a way to send to the server (processing script) any estructure used in an Angular Ctrl. Is it possible to send Controls (instances of controllers) to the processing script without hidden input fields in the form, or writing them into the GET Uris?

Finally, I would like to know if Snow will implement (Or have implemented already) any custom directive in order to render a data structure (array of non-GlideRecord objects) as a instances *standard* list. I think this is the point I missed most in Jelly!

Best regards

[grosch]

Angular is client side, as you've said.   What I ended up doing is having the client side Submit button invoke a method (client side of course) that then makes a GlideAjax call to run stuff server side.   I pass the data from the client side to the GlideAjax parameters to allow it to do its work.

Basically the "Processing Script" section of the UI Page is useless at this point.

[German Alvarez2]

Thank you for your aclaration!

So, comming back to your question, why dont you use ngClick directive to call to the GlideAjax and perform all the works from Angular Side, there you will have all the data defined at angular Ctrl, and also, you won't lose the bindings...

Does this idea helps you?

I think this night I will do a mockup!

[grosch]

That's exactly what I did, once I realized the processing script was just going to be unusable.

[ChrisBurks]

I believe you should be able to access or pass variables that exist in the Controller anywhere within the containing element where the controller is set.

Here's a simple working example.

UI Page:

HTML/XML Markup:

<div ng-app='SN_APP'>

<div ng-controller='SimpleCtrl'>

    <g:ui_form>

            <input type="text" name="my_interaction_data" />

              <!-- data from controller will be captured below -->

            <input type="hidden" name="my_angular_data" value="{{ myAngularVar }}" />

            <g:dialog_buttons_ok_cancel ok="return true" />

    </g:ui_form>

</div>

</div>

Client script:

var app = angular.module('SN_APP', []);

app.controller('SimpleCtrl', function($scope){

    $scope.myAngularVar = 'd71f7935c0a8016700802b64c67c11c6';

});

Processing Script:

var incGR = new GlideRecord('incident');

incGR.get(my_angular_data);

incGR.short_description = my_interaction_data;

incGR.update();

var urlOnStack = GlideSession.get().getStack().bottom();

response.sendRedirect(urlOnStack);

I do realize that your AngularJS script is more than likely more complex than this but   in this example you can see I am able to use the variables set in the AngularJS controller and push them to the processing script using the g:ui_form and buttons.