UI Pages with AngularJS

grosch
Mega Expert

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?  

9 REPLIES 9

Both of those links simply talk about how to get AngularJS setup.   I already have that done, and a 99% done AngularJS application.   Neither of those speak to my specific question though.


Hey Scott,



Have you looked into Angular Services? A Service within Angular is a singleton and can house an object or separate variable values. You can then pass in the service as a dependency to all your controllers. Whatever scope the submit button is running within would then have access to the Service variables to submit or any functions as well.



Hope that helps!


Jared Healy


yetesh_ch
ServiceNow Employee
ServiceNow Employee

Hi Scott,


Processing script runs on server side. Angular however is a client side framework. So, u need to create your custom button that will call a function on client side. You can access any jelly variable on client side. Moreover, you can write any GlideRecord logic in g:evaluate tag.



I created a test UI Page for you. Copy and paste the code given below. Give it name 'test_page' and save it. Now go to "<instance-name>/test_page.do?sysparm_sys_id=12345". Click the button and you shall see 12345 passed in url.



<?xml version="1.0" encoding="utf-8" ?>


<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">


<html>


  <script>http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>


  <body>


  <div ng-app="myApp" ng-controller="myCtrl">


  First Name: <input type="text" ng-model="firstName"></input><br/>


  Last Name: <input type="text" ng-model="lastName"></input><br/>


  <br/>


  Full Name: {{firstName + " " + lastName}}


  <br/>


  <button type="button" ng-click='f()'>Click Me!</button>


  </div>





  <script>


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


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


  $scope.firstName = "Yetesh";


  $scope.lastName = "Chaudhary";


  $scope.f = function ()


  {


  alert("I m clicked ${sysparm_sys_id}");


  }


  });



  </script>


  </body>


</html>


</j:jelly>



Hope it helps!