how to get records with angularJS

[Goran WitchDoc]

Hi,

Just to clear out the conditions 😃 I'm pretty new to servicenow and developing. Coding has always been there in the background all life, but it has never been my main work.

I'm trying to learn how to get angularJS to work like I want and I've been through a lot of tutorials of AngularJS but I havnt found anyone that covers really how to get the information from ServiceNow. all these always put the data in the controller manually.

And when it comes to REST, Im totally new 😃

I've played around abit with the info from Angular in ServiceNow: Tutorial #3 - REST Calls-John Andersen

and I get it to work. But since that one requires a input for the tickets to show, I want to know how to make a ui page that shows the records without any manually input calling for the function to get it.. but show all the records that my query is. Im trying this out on my personal dev-instance.

In my dream world I would just take away the function part and use the get right up, but I guess Im missing something.

This is what I got.

UI page:

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

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

  <!-- Import AngularJS Library -->

  <g:requires name="angular.min.jsdbx" />  

  <!-- Import my UI Script - get updated timestamp to invalidate cache if script changes -->

  <g2:evaluate var="jvar_stamp">

      var gr = new GlideRecord('sys_ui_script');  

      gr.get("e608a7e94fc41600028f7ab28110c748");

      gr.getValue('sys_updated_on');

  </g2:evaluate>  

  <g:requires name="driftinformation.jsdbx" params="cache=$[jvar_stamp]" />  

  <!-- The User Interface -->

  <div ng-app="descEditor" style='padding:40px;'>

      <div ng-controller="DescriptionText">

          <table><tr>

<!--               <td style='width: 300px; vertical-align: top;'>

                  <p>NUMBER</p>

                  <input ng-model="incnum" ng-change="updateRecordList(incnum);"/>

              </td> -->

              <td style='vertical-align: top; padding: 20px;

                                                                        background-color: #B2B2B2; width: 200px;'>

                  <div ng-repeat="num in numbers">{{num.number}}</div>

              </td>

          </tr></table>

      </div>

  </div>

</j:jelly>

UI Script:

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

myApp.controller('DescriptionText', [

  '$scope',

  '$http',

  function($scope, $http) {

      $scope.incnum = "INC010";

      $scope.url = '/api/now/table/incident';

      $http.defaults.headers.common.Accept = "application/json";

      $http({

              method: 'GET',

              url: $scope.url + "?sysparm_query=numberSTARTSWITH"+incnum+

                                                  "^ORDERBYDESCnumber"+

                                                  "&sysparm_fields=number&sysparm_limit=25",

          }).

          success( function(data, status) {

              $scope.numbers = data.result;

          }).

          error ( function(data, status) {

              $scope.numbers = [{"number": "Error fetching list"}];

          });

  }

] );

I'm hoping someone in the community can point me in the right direction 😃

[Rushit Patel2]

hi,

in console it says angular is not defined.

other thing..it is not loading that ng-repeat code.

can you do one thing.

put two simple lines in your page.

<input type="text" id="myname"></input>

<h3>{{myname}}</h3>

see if it works when you enter anything in that textbox.

[Goran WitchDoc]

Hmmm.... Didnt work.. seems to be something wrong with my import of the angular in the ui script perhaps?

But here is the stranges thing... look at my ui page at the same instance.. It fetches the data, but the namebox at the bottom doesnt work and I get the same error in the console.

[Rushit Patel2]

ohh..so it is working now?

may b you have put that input outside of your ng-app div.

[Rushit Patel2]

and try to load angular using CDN <script>https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>

instead of ui script.

[Goran WitchDoc]

Nope... same result with the CDN.

Nope, not working... that last screenshoot was from the ui page instead... with the exakt same code as in the dyn block... but as you can see, the input-field doesnt work. I put it in the very last end.

like this and the /div is for the "ng-app div":

</div>

<input type="text" id="myname"></input>

<h3>{{myname}}</h3>

</j:jelly>