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 😃

[Deepak Ingale1]

Thanks alot Goran

[Rushit Patel2]

hey guys,

checkout my angular app on share.

ServiceNow Share

name:ToDoNOW(WunderList Integration) using AngularJS

[Rushit Patel2]

Hi goranlundqvist,

sorry for late replay..it was too late that night and on other day i was buried in boring company work!

i didnt know that we can add isPublic() function in s.includes and make it public..tnx for that.

and i have code from developer site..that uses glideajax and angular..(to-do page)...and if i add it on any page(dynamic content block) it works fine.

one other thing i noticed is if i add two dynamic block(both using anglurjs) it breaks the page....so best practise would be to load angular in header dropzone.

and in your code your input is outside your ng-app div...it wont work if u put that outside that div. put both line below this line <div id="activeinfo" ng-app="descEditor">

and yeah sweet victory over City. great to know that you are gooner too! we have best chance to win EPL this season

[Goran WitchDoc]

rossipatel, whn you say you add it to your dynamic block block, is this on fuji or geneva? Since I added it on my personal dev which has geneva and it works like a charm. But if I create a new site on my dev(just to be sure nothing else interfers) and only add this block, then angularJS aint working, just get the tabs... But if I use the same code on a ui page in fuji it works.

[Rushit Patel2]

HI,

I was running Fuji. may b you should run same code on other fuji instance.